HTML or CSS navigation bar issue
Question
Basically, I have created a navigation bar that has an underline when hovered and also when it is active. I also have a line spanning the page. When the cursor is hovered over the list, the 4px line appears under the word but it also pushed the line spanning the page down by 4 pixels. Can someone help please.
Here's the HTML:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="stylesheet" href="new1.css">
</head>
<body>
<nav id="ddmenu">
<div class="menu-icon"></div>
<ul>
<li class='top-heading'><a href='#'><span>New in</span></a>
</li>
<li class='top-heading'><a href='#'><span>Homeware</span></a>
</li>
<li class='top-heading'><a href='#'><span>Decorating</span></a>
</li>
<li class='top-heading'><a href='#'><span>DIY</span></a>
</li>
<li class='top-heading'><a href='#'><span>Furniture</span></a>
</li>
<li class='top-heading'><a href='#'><span>Bathroom</span></a>
</li>
<li class='top-heading'><a href='#'><span>Garden</span></a>
</li>
<li class='top-heading'><a href='#'><span>Offers</span></a>
</li>
</ul>
</nav>
</body>
</html>
Here's the CSS
#ddmenu {
zoom: 1;
width: 100%;
background: #FFF;
padding: 0px 0;
}
#ddmenu:before {
content: '';
display: block;
}
#ddmenu:after {
content: '';
display: block;
clear: both;
}
#ddmenu ul {
list-style-type: none;
position: relative;
display: block;
font-size: 12px;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin: 0px;
padding-top: 4px;
border-bottom: 1px solid #EAEBEB;
border-top: 1px solid #EAEBEB;
zoom: 1;
}
#ddmenu ul:before {
content: '';
display: block;
}
#ddmenu ul:after {
content: '';
display: block;
clear: both;
}
#ddmenu li {
display: block;
float: left;
margin: 0;
padding: 0;
}
#ddmenu li a {
float: left;
color: #000;
text-decoration: none;
height: 20px;
padding: 1px 50px 0;
font-weight: normal;
}
#ddmenu li:hover, #ddmenu .active {
text-decoration: none;
border-bottom: 4px solid #EAEBEB;
colour: #000
}
#ddmenu .active a {
font-weight: 700;
}
1 answers
solution1
2 ACCPTED 2015-07-05 18:03:22
When you add a border you're increasing the height of the element so naturally it affects items below it.
Without a set height the optimal solution is to have the border already there but transparent and just change the color on hover .
#ddmenu li {
display: block;
float: left;
margin: 0;
padding: 0;
border-bottom:4px solid transparent;
}
Note: Just a suggestion but you have a lot of padding on the links there. As you can see it in the doesn't look quite so nice at smaller viewports...you might want to look into that.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.