CSS菜單懸停效果

Question

我想在我的下拉菜單中創建一個懸停效果，但我無法弄清楚如何去做。

我想要做的是這樣的：

，而不是這樣的：

我的代碼 - 你也可以看到它here，(updated version)

HTML：

<nav> 
    <ul> 
     <li><a href="#">One</a> 
      <ul> 
       <li><a href="1.html">1.1</a></li> 
       <li><a href="2.html">1.2</a> 
      </ul> 
     </li> 
     <li><a href="#">Two</a> 
      <ul> 
       <li><a href="3.html">2.1</a></li> 
       <li><a href="4.html">2.2</a></li> 
       <li><a href="5.html">2.3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Three</a> 
      <ul> 
       <li><a href="6.html">3.1</a></li> 
       <li><a href="7.html">3.2</a></li> 
      </ul> 
     </li> 
     <li><a href="8.html">Four</a></li> 
    </ul> 
</nav> 

CSS：

nav { 
    float: left; 
} 
nav ul ul { 
    display: none; 
} 
nav ul li:hover > ul { 
    display: block; 
} 
nav ul { 
    list-style: none; 
    position: relative; 
    display: inline-table; 
} 
nav ul:after { 
    content:""; 
    clear: both; 
    display: block; 
} 
nav ul li { 
    float: left; 
} 
nav ul li:hover { 
} 
nav ul li:hover { 
    background-color: #000; 
} 
nav ul li a:hover { 
    color: #fff; 
} 
nav ul li a { 
    display: block; 
    padding: 25px 15px; 
    color: #6F0; 
    text-decoration: none; 
} 
nav ul ul { 
    border-radius: 0px; 
    padding: 0; 
    position: absolute; 
} 
nav ul ul li { 
    float: none; 
    position: relative; 
} 
nav ul ul li a { 
    padding: 15px 40px; 
    color: #000; 
} 

任何幫助將不勝感激。

Answer 1

Working fiddle:

更改樣式以下二：

nav ul li:hover { 
border-bottom: 1px solid #000; 
color: #000; 
} 

nav ul li a:hover { 
color: #000; 
} 

並添加：

nav ul li:hover li:hover{ 
     background: #000; 
} 

爲了樣式子菜單。

首先要設定一個底部邊框（li:hover） - 你可以在此邊框的寬度從1px改變的東西更厚，也就是說，3px