Question

我想在悬停菜单项上添加一行，就像这个网站在导航菜单上的内容一样： http://www.ovenbits.com

我尝试用css做这个，但转换效果很难看。我怎么能这样做？

非常感谢！

Answer 1

而不是在底部使用下划线使用边框：

.menu a:hover { border-bottom:3px solid #fff;}

演示：http://jsfiddle.net/z2uu1dj4/

Answer 2

对于它的价值，在ovenbits.com上的实时效果是通过以下CSS规则实现的：

.topnav-link {
    color: #F5F5F5;
    font-size: 0.8889em;
    text-decoration: none;
    font-weight: normal;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    padding-bottom: 0.125em;
    transition: border-bottom-color 50ms linear 0s;
}
.topnav-link:hover, .topnav-link.active {
    border-bottom-color: #FFF;
}

HTML是：

<li class="topnav-link-item">
    <a href="/commerce" class="topnav-link">Commerce</a>
</li>

所以底部边框放在a元素（链接）上。

过渡应用于边框颜色属性。

Answer 3

Use code like this:

<ul>
    <li class="topnav-link">Home</li>
    <li class="topnav-link">About Us</li>
    <li class="topnav-link">Contact Us</li>
</ul>

ul{float:left; margin:0; padding:0; list-style:none;}
.topnav-link {
    border-bottom: 2px solid transparent;
    color: #000;
    font-size: 0.8889em;
    font-weight: normal;
    padding-bottom: 0.125em;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-bottom-color 50ms linear 0s;
    float:left;
    margin:0 5px;
}
.topnav-link:hover, .topnav-link.active {
    border-bottom-color: #f00;
}

在悬停时在菜单项下面添加一行？

3 个答案: