Question

我有一个使用无序列表的水平导航菜单。在菜单下面有一条直灰线，它必须有100％的父容器宽度。将鼠标悬停在列表元素上时，该部分行必须在列表元素下方以蓝色显示。我找不到任何合适的方法。我得到了它的位置：相对和添加顶部：14px，但它并不真正令我满意，因为任何字体大小或字体面的更改将破坏一切。我还考虑过将元素之间的边距更改为填充，增加li的高度并给每个人设置相同的灰色边框，并在悬停时更改它的颜色，但我需要沿着父div的宽度进行调整。它看起来如何： expected result

我目前的代码：

#container {
  width: 80%;
  margin: auto;
  background-color: white;
}

#container ul {
  list-style-type: none;
  display: inline-block;
  margin: 0;
  padding: 0;
  margin-top: 5px;
  margin-bottom: 10px;
}

#container ul li {
  float: left;
  margin-left: 20px;
}

#container ul li:first-child {
  margin-left: 0;
}

#container ul li a {
  text-decoration: none;
  color: black;
}

#container ul li a:hover {
  color: grey;
}

#container #slider {
  display: inline-block;
  height: 5px;
  background-color: #f1f1f1;
  width: 100%;
}

<div id="container">
  <ul>
    <li><a href="#">INDEX</a></li>
    <li><a href="#">HELP</a></li>
    <li><a href="#">LONG LINK TEXT</a></li>
  </ul>
  <span id="slider"></span>
</div>

JSFiddle：https://jsfiddle.net/9fhvyk76/3/

Answer 1

您希望使用伪元素，这样您就可以更好地控制大小/位置而无需进行太多更改。只需添加位置：相对于链接本身，以便伪比例和定位与它相关联。如果这是您正在寻找的，请告诉我们！

https://jsfiddle.net/g00jrsqf/

#container ul li a{
   position: relative;
}
#container ul li a:after{
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  background: #01a2e8;
  opacity: 0;
  left: 0;
  bottom: -29px;
}
#container ul li:hover a:after{
  opacity: 1;
}

如何使悬停底部边框重叠div下方？

1 个答案: