调整 <li> 元素上border-bottom的长度

Question

我一直在玩弄这个导航栏，除了这个小问题外，我几乎把所有东西都弄好了。简单地说，每当我将鼠标悬停在导航栏中的一个单词上时，它下面就会出现一条小红线。我唯一的问题是我想稍微延长那条红线。

我唯一一次设法在这件事上得到一个扩展的红线是当我使用这段代码时：

li.nav2:hover {
  border-bottom:3px solid red;
  padding-bottom:1px;
}

现在的问题是它有点破坏导航栏的流程。

这是我的 jsfiddle：http://jsfiddle.net/q23XN/1/

Answer 1

答案：

根据您的功能执行此操作的最佳方法是使用绝对定位到将用作边框的 <a> 的子元素：

HTML：

<li class="nav1"><a href="http://www.google.com/">home<b/></a></li>

请注意其中的新<b/>。

CSS：

li.nav1 a, li.nav2 a
{
    position: relative;
}

li.nav1 a b, li.nav2 a b
{
    position: absolute;
    top: 100%;
    left: -20px;

    display: none;
    width: 100%;
    height: 3px;
    background: red;
    padding: 0px 20px;
}

li.nav1 a:hover b, li.nav2 a:hover b{
    display: block;
}

通过相对定位<a> 元素，我可以定位一个子元素，我将其称为<b>（使用top: 100%）。然后通过在该元素上使用填充，我可以使其比父元素更宽并使用left: -20px 将其向左滑动。 （您可以更改附加宽度，但请确保在padding: 和left: 中设置相同的数字。

最后，我通常将其显示设置为none，然后当父<a>收到悬停事件时，我使用此选择器将其显示设置为block：

li.nav1 a:hover b, li.nav2 a:hover b

JSFiddle

---

其他想法：

您可以在<a> 上使用侧边距来做到这一点：

li a
{
    padding: 0px 20px;
}

JSFiddle

---

如果您只想扩展<a> onHover 的宽度，您可以使用li a:hover：

li a:hover
{
    padding: 0px 20px;
}

但这会使链接变宽，可能会影响链接的位置。

JSFiddle

---

如果你想保持<a> 的宽度，你可以对整个<li> 执行此操作，并将边距底部设置为边框宽度的负值：

li.nav1:hover, li.nav2:hover {
    border-bottom:3px solid red;
    margin-bottom: -3px;
}

JSFiddle

---

注意：

一方面，在你原来的小提琴中，你的顶部栏的选择器是

li.nav1 a:hover {

虽然你的底部栏的选择器是

li.nav2:hover {

所以您将填充添加到<li>s，而不是第二个导航中的<a>s。

Answer 2

如果您希望 nav2 保持其高度但外观与第一个 nav 相同，那么您只需将“a”添加到：

li.nav2:hover {
border-bottom:3px solid red;
padding-bottom:1px;
}

那么它会是：

li.nav2 a:hover {
border-bottom:3px solid red;
padding-bottom:1px;
}

Answer 3

试试这个，添加填充

li.nav2 a:hover {
border-bottom:3px solid red;
padding: 0 10px 1px 10px;

}