在懸停的菜單項下添加一行？

我要添加上懸停的菜單項的線路就像這個網站都有自己的導航菜單： http://www.ovenbits.com 在懸停的菜單項下添加一行？

我試着用CSS來做到這一點，但過渡效果是醜陋的。我怎樣才能做到這一點？

非常感謝！

來源

2014-09-05 user25808

顯示你有什麼話在嘗試的jsfiddle，然後問什麼是不工作 – Rex 2014-09-05 04:19:55

添加'border-底部'屬性懸停。 – 2014-09-05 04:20:13

你喜歡線上懸停的方式/在ovenbits.com上看起來如何？ – 2014-09-05 04:21:36

對於什麼是值得的，在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元素（鏈接）上。

轉換應用於邊框顏色屬性。

來源

2014-09-05 04:27:02

，而不是在底部使用下劃線使用邊界：

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

演示在這裏：http://jsfiddle.net/z2uu1dj4/

來源

2014-09-05 04:27:18 rahim701

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

來源

2014-09-05 04:30:36 user3074446

在懸停的菜單項下添加一行？

回答

相關問題