问题描述:

So I have this menu bar. It is an unordered list and the menu bar is seperated from the content of the page with a thin, light underline. Now I want that when someone mouse overs, a link, the column should have a thick underline (not the text).

My css looks like so:

.main-navbar

{

background-color:#fff;

border-bottom:1px solid #f2f2f2;

}

.main-navbar-item li a:hover

{

border-bottom: 5px solid #dddddd;

}

This works fine and I can see the thick bottom border show up on mouse over. However, the main-navbar line goes down to accommodate the additional 5 pixels on mouse over and comes back up on mouse out. How can I ensure that the mouse over bottom bar does not disturb the main nav bar underline?

As always, any help is appreciated!

网友答案:

My Best Opinion is reduce the 5px from bottom padding

Eg - See Below CSS:

CSS:
.main-navbar-item li a{
padding:15px  10px;
}
.main-navbar-item li a:hover 
{
padding:15px 10px 10px 10px ;
 border-bottom: 5px solid #dddddd;
}
相关阅读:
Top