When a Navigation menu item (LI) is marked as active in CSS, how can I prevent it from being hover-able?
Check out the CSS code below:
.page-header .menu li {
float:left;
display: inline;
margin-right: 2px;
line-height: 34px;
}
.page-header .menu li a.active {
background-color: white;
font-weight: bold;
color:black;
}
.page-header .menu li a:hover {
background-color: red;
}
Here's the corresponding HTML code:
<ul class="menu">
<li><a class="active" href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
</ul>
-
The use of class="active" should disable the hover effect.