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.