Can't get last-child with hover to work on nav sub menu

Question

My border radius on the last option in my sub menu "Get Ready!" works, but I can't get it to do the same when you hover over it. I have tried looking at previous answers, but for the life of me I can't get it to work. Code is as follows:

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

I believe it's something to do with the CSS in the line 3rd from the bottom and the bottom line itself, but I've tried different combinations and can't get it to function.

Thanks in advance for your help, it will be greatly appreciated!!

Answer 1

I would also add webkit & moz border radius to ensure all browsers display it properly. It wasn't working for me in local enviroment, but jsfiddle displayed it properly.

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

This is what you're looking for

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

FIDDLE

You can slightly shorten the selector to target the nested li like this:

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

FIDDLE