Question

I am creating a menu which I am trying to base on this menu:

http://www.yootheme.com/widgetkit

However I have run into a small problem where if you hover over the middle of the menu item, it works ok, but if you hover over the edge of it (where the border line is), it moves itself and the other menu items in front of it to the right by 1px.

I have been messing around with the code for a fair amount of time now and can’t seem to figure it out.

HTML:

<div class="nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li class="active"><a href="index.html">Structure</a></li>
        <li><a href="index.html">Buttons</a></li>
        <li><a href="index.html">Forms</a></li>
        <li><a href="index.html">Download</a></li>
    </ul>
</div>

CSS:

.nav {
    max-width: 100%;
}
.nav ul {
    max-width: 100%;
    margin: 0 auto;
    background: #FFFFFF;
    background: -webkit-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
    background: -moz-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
    background: -ms-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
    background: -o-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
    background: linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%); 
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: 100% 100%;
    border: 1px solid #c8c9ca;
    border-radius: 6px 6px 6px 6px;
    height: 40px;
}
.nav ul li {
    margin-top: -1px;
    padding-top: 1px;
    float: left;
    height: 39px;
    list-style: none outside none;
}
.nav ul li:first-child {
    border-left: none;
}
.nav ul li.active{
    border-left: 1px solid #DCDDDE;
    border-right: 1px solid #DCDDDE;
    padding-top: 1px;
    float: left;
    list-style: none outside none;
    background: -webkit-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
    background: -moz-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
    background: -ms-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
    background: -o-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
    background: linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
    border-left: 1px solid #DCDDDE;
    border-top: 1px solid #D2D3D4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset;
    color: #000000;
}
.nav ul li.active:hover{
    padding-left: 1px;
    padding-right: 1px;
}
.nav ul li:hover{
    border-right: 1px solid #DCDDDE;
    border-left: 1px solid #DCDDDE;
    border-top: 1px solid #D2D3D4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset;
    color: #000000;
}
.nav ul li a {
    float: left;
    text-decoration: none;
    display: block;
    font-family: 'YanoneKaffeesatzLight', Arial, sans-serif;
    height: 38px;
    line-height: 38px;
    padding-left: 22px;
    padding-right: 22px;
    display: block;
    color: #444444;
    font-size: 17px;
    text-shadow: 0 1px 0 #FFFFFF;
}
.nav ul li a:hover{
    padding-left: 21px;
    padding-right: 21px;
}

I have also made a JSFiddle for a proper preview.

Can anyone help me figure out why this is happening and provide a possible solution? It’s probably something stupid I’m not seeing.

Answer 1

That’s because you put borders on LI:HOVER and after that you change the padding on A:HOVER not on LI:HOVER again. Just change the place of :hover like this:

.nav ul li:hover a{
    padding-left: 21px;
    padding-right: 21px;
}

And I think it should be fine now.