Css: rollover

1

Hi there!

I am making a site where i wanna have a simple rollover in the vertical submenu… The idea is to have a little arrow next to a link when you go over it with your mouse. Ok so i managed to get the arrow everytime i go over a link in the menu. BUt i really cant get that arrow to the left! its now under te text. Here what it looks like right now(its about the vertical menu on the left site of the screen)**: Site example**

Here is the css i use for that submenu:

    div#local {
        float: left; 
        width: 130.5px;
        
        text-align: left;
        margin-left: -330px;
        
    }
    div#local ul, li{
        font-size: 0.9em;
        
        margin: 0px -5px;
        padding: 0px;
    }
    div#local li{
        list-style: none;
    }
    div#local a,
    div#local a:link,
    div#local a:active,
    div#local a:visited {
        font-weight: bold;
        text-decoration: none;
        
        margin: 0px;
        padding: 0px;
        
        color: #4A4A4A;
    }
    div#local a:hover {
        color: #ffffff;
        background: transparent url(../images/arrow.gif) no-repeat 0px 5px;
        background-position: left;
    }

and here the xhtml:

<div id="local">    
        <ul>
            <li><a href="#">Content page 1</a></li>
            <li><a href="#">Content page 2</a></li>
            <li><a href="#">Content page 3</a></li>
            <li><a href="#">Content page 4</a></li>
            <li><a href="#">Content page 5</a></li>
            <li><a href="#">Content page 6</a></li>
            <li><a href="#">Content page 2</a></li>
            <li><a href="#">Content page 3</a></li>
            <li><a href="#">Content page 4</a></li>
            <li><a href="#">Content page 5</a></li>
            <li><a href="#">Content page 6</a></li>
        </ul>
     </div>

can anyone tell me how i can get that arrow just next to the links??

any help is welcome!

2

Ok now that problem is solved, i have a new problem that i want to solve… but i dont know how

I want to change the color of an active link, and that it keeps the active color no mather where u click with your mouse.

I now use the a:active, but this isnt the right way to get the outcome i had in mind…

Anyone an idea how to achieve this?

3

Give it an id of #active…