不能让最后一个孩子悬停在导航子菜单上工作

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