Question

I have a vertical ul as a nav menu. When a:hover is triggered, a border-left shows up at the edge of the screen and padding is adjusted so the text isn’t displaced. Pretty common menu effect. Works well, except when user resizes their screen to the point where the nav menu items break into two lines- then there is no padding on the second line, pulling it to the left. I need to find a way to apply the padding equally to the whole li even if the line is broken, while keeping my border-left effect!

I have looked at some answers to similar problems on stackoverflow but they all seem to involve removing the padding from the li and applying it to the ul or containing element instead. If I do this, then I lose the positioning on my left border highlight- the border shows up right next to the text, and I can’t figure out how to manipulate the padding on the border separate from the li to bump it back out!

Here’s the css:

#middle_left ul {
    list-style: none;
    padding-top:5%;
    font-family: 'Gill Sans', Verdana, Arial, 'Liberation Sans', FreeSans, sans-serif;
    font-size:1.5em;
}

#middle_left ul a {
    padding-left:15px;
    text-decoration: none;
    color: #2e2f2a;
}

#middle_left ul a:hover {
    padding-left:12px;
    color: #81827f;
    border-left: solid 3px #81827f;
}

And the HTML:

<div id="middle_left">
    <ul>
        <li><a href="#">The Novel</a></li>
        <li><a href="#">Bio</a></li>
        <li><a href="#">Translation</a></li>
        <li><a href="#">Other Works</a></li>
    </ul>
</div> 

Thanks for any suggestions for how to tackle this!

Answer 1

Wrap the a in divs:

<div id="middle_left">
<ul>
    <li><div><a href="#">The Novel</a></div></li>
    <li><div><a href="#">Bio</a></div></li>
    <li><div><a href="#">Translation</a></div></li>
    <li><div><a href="#">Other Works</a></div></li>
    </ul>
</div>

    #middle_left ul {
list-style: none;
padding-top:5%;
    padding-left: 15px;
font-family: 'Gill Sans', Verdana, Arial, 'Liberation Sans', FreeSans, sans-serif;
font-size:1.5em;
}

#middle_left ul div{
    padding-left:15px;
    text-indent: -15px;

}

#middle_left ul div:hover{
    padding-left:15px;
    text-indent: -15px;
    border-left: solid 3px #81827f;

}

#middle_left ul a {
padding-left:15px;
text-decoration: none;
color: #2e2f2a;
}

#middle_left ul a:hover {
padding-left:12px;
color: #81827f;
}

See here for example:

http://jsfiddle.net/6nz9F/2/