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; }
Comments
Post a Comment