HTML 或 CSS 导航栏问题

Question

基本上，我创建了一个导航栏，在悬停和活动时都有下划线。 我也有一条横跨页面的线。 当光标悬停在列表上时，4px 行会出现在单词下方，但它也会将跨越页面的行向下推 4 像素。 有人可以帮忙吗。

这是 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>

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

Answer 1

当您添加边框时，您会增加元素的高度，因此它自然会影响其下方的项目。

如果没有设置高度，最佳解决方案是让边框已经存在但透明，只需更改hover的颜色。

#ddmenu li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  border-bottom:4px solid transparent;
}

JSfiddle 演示

注意：只是一个建议，但您在那里的链接上有很多填充。 正如您在较小的视口中看到的那样，它看起来不太好……您可能想研究一下。

HTML 或 CSS 导航栏问题

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-07-05 18:03:22

HTML 或 CSS 导航栏问题

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-07-05 18:03:22

解决方案1
2 已采纳 2015-07-05 18:03:22