Question

I have created a Navigation menu in CSS. If a item (LI) is active how to prevent that to be hover-able?

CSS 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;
}

HTML:

    <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> 

–

class="active" should disallow hover.

Answer 1

Out select it:

.page-header .menu li a.active,
.page-header .menu li a.active:hover {
    background-color: white;
    font-weight: bold;
    color:black;
}

http://jsfiddle.net/userdude/RSwnP/

Note, I’ve added the a.active:hover, but also note selector specificity is overriding it here. See this fiddle for an example (you may or may not want to use) in which I’ve made one “less specific” than the other; I’ve removed the li from the :hover selector.