overflow - CSS: Overflowing corners in navigation bar -


i trying make navigation bar submenus hidden until hovered on correspondent parent menu.

that works fine, corners of navigation bar rounded with

border-radius: 10px; 

now when hover, corners of hover area not rounded, want them remain in given area of navigation bar. tried using:

overflow:hidden; 

this works corners of hovered area, fit rounded corners of navigation bar, (quite logically) submenus don't show anymore, since overflowing navigation bar (as intended), , hidden.

how can make sure corner overflows hidden, submenus aren't?

thanks help.

edit: here's fizzle: http://jsfiddle.net/xzntr/5/

if don't put overflow:hidden there, corners of home , inspiration going out of bound of navigation bar. not want.

if put overflow hidden there, submenus don't show.

just add border radius 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


Comments

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -