调整<li>元素</li>上边框底部的长度

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>。

Answer 2

如果你想让nav2保持高度，但外观与第一个导航相同，那么你需要添加的就是＆＃34; a＆＃34;到：

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;

}