Question

我的子菜单中的最后一个选项的“边框半径”“准备就绪！”但是当你将鼠标悬停在它上面时，我无法做到这一点。我曾尝试过以前的答案，但对于我的生活，我无法让它发挥作用。代码如下：

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有关，但我尝试了不同的组合，无法使其正常运行。

在此先感谢您的帮助，我们将不胜感激!!

Answer 1

这就是你要找的东西

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

Answer 2

我还要添加webkit＆amp; moz边界半径，以确保所有浏览器正确显示它。在当地的环境中，它并不适合我，但是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;
}

无法使用悬停的最后一个孩子在nav子菜单上工作

2 个答案: