CODEWITHSUNDEEP
htmlcss
user3761459
user3761459

Reputation: 519

Hover border position

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:

enter image description here

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/

Upvotes: 7

Views: 1822

Answers (6)

Vucko
Vucko

Reputation: 20834

A little late to the party, but here is a solution without negative values and using positions. Basically I 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

Upvotes: 3

amol
amol

Reputation: 1555

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

Check this DEMO

Upvotes: 1

SW4
SW4

Reputation: 71140

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 */
}

Upvotes: 11

ohboy21
ohboy21

Reputation: 4319

I have a workaround for your solution. Just don't set the border to the ul, but insert an div-element with a border. So you don't depend on the list.

DEMO Fiddle

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

Upvotes: 0

labtoy
labtoy

Reputation: 198

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

Upvotes: 4

G.L.P
G.L.P

Reputation: 7207

you can try like this: 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;
}

Upvotes: 1

Related Questions