Question

I am having a problem with hovering over a active li item.

• screenshot 1 (not hovering): https://i.stack.imgur.com/zodAL.png
• screenshot 2 (hovering): https://i.stack.imgur.com/EVnKD.png
• screenshot 3 (hovering over another li): https://i.stack.imgur.com/V4re5.png
• fiddle: http://jsfiddle.net/LVLKW/3/

I need the current class to be the same as hover, im not sure where I have gone wrong.

Thanks

Answer 1

I propose the following changes:

1. Make the <li> active, not the <a>.
2. Combine the :hover and .active rules, for easy maintenance.
3. Don’t have different padding for normal and active/hover states.

Demo: http://jsfiddle.net/LVLKW/11/

---

HTML

<div id="nav">
    <ul>
        <li class="current"><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
    </ul>
</div>​

CSS

body {
    background-color: lightblue;
}
#nav ul{
    margin-top: 23px;
    list-style: none;
}
#nav ul li{
    font-size: 17px;
    padding: 10px 11px 7px 11px;
    font-weight: bold;
    font-family: HelNue;
    display: inline;
}
#nav ul li.current,
#nav ul li:hover{
    font-family: HelNue;
    background-color: white;
    margin: 0;
    color: #58585a;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#nav ul li:hover a{
    color: #58585a;
}

#nav ul li a{
    color: black;
}​