title: Can't get last-child with hover to work on nav sub menu
body: <p>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:</p>
  
  <p><a href="http://jsfiddle.net/ives86/3v635/1/" rel="nofollow">JS Fiddle example</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul&gt;
      &lt;li id="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="team.html"&gt;The Team&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="trips.html"&gt;Trips&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="availability.html"&gt;Availability&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Get Ready!&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="what_to_bring.html"&gt;What to Bring&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="map.html"&gt;Map&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="contact_us.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>    /* 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 &gt; ul                    { display: block; margin: 0; padding: 0; }
      nav ul li#active a, nav ul li a:hover, nav ul li ul li &gt; a:hover                { background: #80c5ff; color: #fff; }
      nav ul li:hover &gt; ul li                 { float: none; display: block; }
      nav ul li ul li:last-child &gt; a:hover    { border-radius: 0 0 10px 10px; }
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks in advance for your help, it will be greatly appreciated!!</p>