border radius the bottom of a dropdown menu only - html

Question

working on a simple nav bar. so far its working perfectly for me minus one minor detail. when it drops down i want the middle sections to remain a rectangle and the bottom section to always be curvy on the bottom. right now I have it so the bottom section is curvy, though when I hover over it the regular rectangle shows back up. I tried to fix it myself, but all I could get to work was it would change all sections to curvy
here is a jsFiddle of what I am working on: http://jsfiddle.net/7mjEC/
and here is the css:
#charset "utf-8";
#topMenu {
padding: 0px;
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
top: 80px;
}
#topMenu ul {
margin: 0px;
padding: 0px;
}
#topMenu ul li {
background-color: #666;
float: left;
border: 1px solid #999999;
position: relative;
list-style-type: none;
}
#topMenu ul li a {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 30px;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
height: 30px;
width: 150px;
}
#topMenu ul ul {
position: absolute;
visibility: hidden;
top: 31px;
}
#topMenu ul li ul li a:hover {
background-color: #39F;
}
#topMenu ul li:hover ul {
visibility: visible;
}
#topMenu ul li:hover {
background-color: #919191;
}
#topMenu .topleftmenuitem {
border-radius: 20px 0 0 20px;
}
#topMenu .toprightmenuitem {
border-radius: 0 20px 20px 0;
}
#topMenu .topleftmenuitem:hover {
border-radius: 20px 0 0 0;
}
and #topMenu .toprightmenuitem:hover {
border-radius: 0 20px 0 0;
}
#topMenu ul ul li:last-child {
border-radius: 0 0 20px 20px;
}
see when you hover over the last child it turns from curved to rectangle, I just want to keep it always curved.

Answer 1

You need to use :last-of-type or :last-child pseudo
#topMenu > ul > li > ul > li:last-of-type a:hover {
border-radius: 0 0 20px 20px;
background: #f00; /* You can remove this, its just for a demo */
}
Demo
The above selector means, select direct child ul to element having an id of #topMenu, than select direct li to that ul, moving further applies the same and at the end, we select the last li child which is nested under level 2 ul and we apply the styles on a:hover

Answer 2

I have updated your fiddle. You DO NOT need to break all of the ul's up like this. Please see my Fiddle for much simpler code:
http://jsfiddle.net/7mjEC/2/
The only css change you really need is to add ONE selector in:
ul ul li:last-child,
ul ul li:last-child a {
border-radius: 0 0 20px 20px;
}