CODEWITHSUNDEEP
htmlcss
J.Zil
J.Zil

Reputation: 2449

Menu - Align text middle with bottom aligned border

This is my current code: http://jsfiddle.net/spadez/gMm2P/5/

Can anyone please tell me how I can have the text aligned vertically in the middle of the navbar but then have a 3px blue bar at the bottom of the navbar at the bottom of the menu item on hover or active.

As an example: http://dribbble.com/shots/1412015-Restaurant-admin/attachments/206070

My code (without the center align and with the blue bar on hover sitting too high):

#header {background-color: white; padding: 0 100 0 100; height: 70px;}
#nav {padding-left: 80px;}
#nav a:hover {border-bottom: 3px solid blue;}
#nav a:active {border-bottom: 3px solid blue;}

Upvotes: 0

Views: 63

Answers (2)

Naresh Ravlani
Naresh Ravlani

Reputation: 1620

Use following style for #nav

#nav a:hover {
border-bottom: 3px solid blue;
padding-bottom: 23px;
}

Working demo Here

Upvotes: 1

robbclarke
robbclarke

Reputation: 749

Based on your jsfiddle, I was able to get it working using:

#nav li { height: 70px; }
#nav li a {
    height: 67px;
    line-height: 67px;
    border-bottom: 3px solid #fff;
    display: inline-block;
}
#nav li a:hover { border-color: blue; }

Upvotes: 1

Related Questions