Hover position

Question

In the following code, I set the lower border of ul . When hovering over elements in ul I want to show the bottom border or hover element exactly on the ul border. I can’t set the position of both borders ( ul and ul ) so that they cross over on hover.

I tried using the absolute position and line height, but could not achieve much success.

Here is how I would like:

Here is 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 put both your ul and li - to shift the bottom of the li child to the width of the border, and then set it to transparent , then use the li:hover event / selector to set the brother color to red.

Demo script

Use the CSS below:

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

Answer 3

A bit late for the party, but here is a solution without negative values ​​and using positions . I basically used only background colors :

 .box{ background:green; padding-bottom:5px; } ul{ list-style:none; margin:0; padding:0 0 0 10px; background:white; } ul li{ display:inline-block; vertical-align:top; margin-left: 20px; } ul li a{ background:white; } li a:hover{ border-bottom:5px solid red; } 

Jsfiddle

Answer 4

you can try the following: DEMO

CSS

 ul { list-style: none; padding: 0 0 0px; margin: 0px; border-bottom: 5px solid green; position:absolute; width:100%; } ul li { float: left; margin-left: 20px; border-bottom: 5px solid transparent; margin-bottom:-5px; z-index:999; } a { text-decoration: none; display: block; } ul li:hover { z-index:9999; border-bottom: 5px solid red; } 

Answer 5

Add 5px transparent border and make it red on hover . Try this code

 <div class="box"> <ul class="clearfix"> <li><a href="#">test 1</a></li> <li><a href="#">test 2</a></li> </ul> </div> .clearfix:before, .clearfix:after{ display: table; content: ""; line-height: 0; } .clearfix:after{ clear: both; } ul{ list-style: none; padding: 0; margin: 0; border-bottom: 5px solid green; } ul li{ float: left; margin-left: 20px; padding: 0 0 10px; border-bottom: 5px solid transparent; margin-bottom: -5px; } a{ text-decoration: none; display: block; } li:hover{ border-color: red; } 

Mark DEMO

Answer 6

I have a workaround for your solution. Just don't set the border to ul , but insert a div element with a border. This way you will not be dependent on the list.

Demo feed

HTML:

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

CSS

 .box { width: 500px } #border { width: 100% position: absoulte; margin-top: -15px; border-bottom: 5px solid green; } ul{ list-style: none; padding: 0 0 10px; margin: 0; overflow: hidden; } ul li{ float: left; margin-left: 20px; border-bottom: 5px solid green; } ul li:hover { border-bottom: 5px solid red; } a{ text-decoration: none; display: block; }