Hover border position

Question

In the following code, I have set bottom border the ul. On the hover over the items in the ul, I want to show the bottom border or the hover item exactly on the ul border. I'm unable to set the position of both borders (ul and the ul items) so that they go on each other on the hover.

I've tried using absolute position and the line height but could not get much success.

This is how I'd like:

Here's the code:

HTML:

<div class="box">
    <ul>
        <li><a href="#">test 1</a></li>
        <li><a href="#">test 2</a></li>
    </ul>
</div>

CSS:

ul{
    list-style: none;
    padding: 0 0 10px;
    margin: 0;
    border-bottom: 5px solid green;
    overflow: hidden;
}

ul li{
    float: left;
    margin-left: 20px;
}

a{
    text-decoration: none;
    display: block;     
}

a:hover{
    border-bottom: 5px solid red;    
}

Demo: http://jsfiddle.net/nNvfy/

Answer 1

You want to position both your ul and li - offset the bottom of the child li by the width of your border, whilst setting it to transparent then use the li:hover event/selector to set the broder color to red.

Demo Fiddle

Use the below CSS:

ul {
    list-style: none;
    margin: 0;
    border-bottom: 5px solid green;
    position:relative;
    padding:0;
}
ul li {
    padding:10px 10px;
    margin-left: 20px;
    display:inline-block;
    position:relative;
    bottom:-5px; /* <-- offset bottom of li by border width so it overlaps ul green border */
    border-bottom: 5px solid transparent; /* add border, make transparent so it doesnt 'jump' on hover */
}
a {
    text-decoration: none;
    display: block;
}
li:hover {
    border-color:red; /* <-- use the li hover event (not a hover) to color the border */
}

Answer 2

here you go, working version: http://jsfiddle.net/hKVp6/

ul{
    width: 100%;
    float: left;
    list-style: none;   
    margin: 0;
    border-bottom: 5px solid green;
}

li{
    float: left;
    margin-left: 20px;
    padding: 0 0 10px;
}

li:hover {
    border-bottom: 5px solid red; 
    margin-bottom: -5px; /* same as bottom border */    
}

li a{
    text-decoration: none;
    display: block;     
}