不能讓最後一個孩子懸停在導航子菜單上工作

Question

我的子菜單中的最後一個選項的邊框半徑「準備就緒！」工作，但我不能讓它在你懸停時做同樣的事情。我曾試着尋找以前的答案，但對於我的生活，我無法讓它工作。代碼如下：

JS Fiddle example

HTML：

<nav> 
<ul> 
    <li id="active"><a href="index.html">Home</a></li> 
    <li><a href="team.html">The Team</a></li> 
    <li><a href="trips.html">Trips</a></li> 
    <li><a href="availability.html">Availability</a></li> 
    <li><a href="#">Get Ready!</a> 
     <ul> 
      <li><a href="what_to_bring.html">What to Bring</a></li> 
      <li><a href="map.html">Map</a></li> 
      <li><a href="gallery.html">Gallery</a></li> 
     </ul> 
    </li> 
    <li><a href="contact_us.html">Contact Us</a></li> 
</ul> 

CSS：

/* nav container */ 
    nav   { float: right; } 
    nav ul  { position: relative; display: inline-block; padding: 0px 20px; list-style: none; background: #DBFFFB; border-radius: 10px; } 
    nav ul li { position: relative; float: left; } 
    nav ul li:hover       { background: #80c5ff; } 
    nav ul li a, nav ul li:hover ul li a { display: block; font-family: Maven Pro, Myriad Pro, sans-serif; text-decoration: none; color: #181818; padding: 10px 8px; font-size: 0.8em; text-transform: uppercase; } 
    nav ul li ul       { position: absolute; display: none; border-radius: 0 0 10px 10px; width: 120px; top: 36px; left: 0px; z-index: 1000; } 
    nav ul li:hover > ul     { display: block; margin: 0; padding: 0; } 
    nav ul li#active a, nav ul li a:hover, nav ul li ul li > a:hover    { background: #80c5ff; color: #fff; } 
    nav ul li:hover > ul li     { float: none; display: block; } 
    nav ul li ul li:last-child > a:hover { border-radius: 0 0 10px 10px; } 

我相信這是與從線3的CSS底線和底線本身，但我嘗試了不同的組合d不能讓它運作。

在此先感謝您的幫助，將不勝感激！

Answer 1

我還會添加webkit & moz border radius，以確保所有瀏覽器正確顯示它。這在當地環境中並不適合我，但jsfiddle正確顯示了它。

nav ul li ul li:last-child:hover { 
    border-radius: 0 0 10px 10px; 
    -webkit-border-radius: 0 0 10px 10px; 
    -moz-border-radius: 0 0 10px 10px; 
} 

Answer 2

這是你在找什麼

nav ul li ul li:last-child:hover 
{ 
    border-radius: 0 0 10px 10px; 
} 

FIDDLE

可以稍微縮短選擇目標嵌套li這樣的：

nav li li:last-child:hover 
{ 
    border-radius: 0 0 10px 10px; 
} 

FIDDLE