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

Can you simplify your HTML+CSS a little bit?

the
– the

2015-07-05 18:11:10 +00:00
Commented Jul 5, 2015 at 18:11 — the
– the, Commented Jul 5, 2015 at 18:11

Paulie_D · Accepted Answer · 2015-07-05 18:03:22Z

2

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

JSfiddle Demo

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.

answered Jul 5, 2015 at 18:03

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Grant9196 Over a year ago

You're my new best friend :D

Paulie_D Over a year ago

You are very welcome. If this answer helped you might wish to upvote or mark as the accepted answer when time allows.

Grant9196 Over a year ago

I did try but my rep isn't hight enough yet :(

Paulie_D Over a year ago

No problem. You'll get there.

dialogik Over a year ago

You can always accept an answer – regardless of your reputation.

Collectives™ on Stack Overflow

HTML or CSS navigation bar issue

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related