Question

i am creating simple side menu, such that when the user hover on item background color change and when he clicks on it the hover effect should be maintained until user clicks other item

my code:

 ul#nav {
    padding: 0;
    margin: 0 0 10px 0;
    -moz-appearance: menubar;
        -webkit-appearance: menubar;
    background-position: left;
    font-size: larger;
}

.mmenu{ width: 190px;
       position: fixed;
}
.mmenu a{
    font-size:14px;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight:bold;
    display: block;
}

.mmenu a:hover{ color: white;
background-color: #003366;
font-style: oblique;
border-top: 0px outset #003366;
border-bottom: 0px inset #003366;
border-right:0px outset #003366;
border-left: 0px inset ;
}

the hover effect is working fine, however the style is not maintained when i click any item, i tried active, visited but no luck. anyone knows where is the problem?

html

<div id="nav" class="mmenu" style="border: 2px double #f2f2f2; left: 25px; width: 200px; border-radius: 6px;">
                            <ul type="none">        
                                        <li><a  href="another example.php">Messages</a></li>
                                        <li><a  href= "example.php">My Conferences</a></li>

                                    </ul>
                                </div>

Answer 1

Just add the attribute

Onclick="this.style.background='#003366'"

to the menu item (“.mmenu a”)