CSS: Overflowing corners in navigation bar

Question

I am trying to make a navigation bar where the submenus are hidden until hovered on their correspondent parent menu.

That works fine, but the corners of my navigation bar are rounded with

border-radius: 10px;

Now when I hover, the corners of the hover area are not rounded, but I want them to remain in the given area of the navigation bar. So I tried using:

overflow:hidden;

This works for the corners of the hovered area, they now fit the rounded corners of my navigation bar, but now (quite logically) my submenus don't show anymore, since they are overflowing my navigation bar (as intended), and thus are hidden.

How can I make sure my corner overflows are hidden, but my submenus aren't?

Thanks for your help.

EDIT: Here's a fizzle: http://jsfiddle.net/xznTR/5/

If i don't put the overflow:hidden there, the corners of home and inspiration are going out of bound of the navigation bar. This I do not want.

If I do put the overflow hidden there, the submenus don't show.

Answer 1

Just add the border radius to the appropriate list items:

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

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

FIDDLE

Answer 2

Here is a fiddle without using the last-child CSS3 selector Fiddle

I removed position:relative and added overflow:hidden to nav ul

Then I removed top:100% from nav ul ul