Currently, I am working on developing a basic side menu that changes its background color when the user hovers over an item. Additionally, I want the hover effect to remain even after the user clicks on it until they click on another item.
Below is a snippet of 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 works as expected, but the style does not persist when clicking on any item. I have tried using `active` and `visited`, however, without success. Does anyone know what could be causing this issue?
Here's a part of the HTML code:
<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>