Question

I am having some troubles in styling the top dropdown menu here so that it creates a toggle effect. I am using padding to delimit the hover area but then there is no chance I can hover over the submenus.

#topmenu {
background-color: rgba(0,0,0,1);
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-size: 20pt;
position: fixed;
width: 100%;
top: 0;
}

Answer 1

add z-index: larger-number to #topmenu to make sure the menu is always on the top level, so it can be hovered.

css transform will change the z-index order. you used it on the h2. it covered the submenu.

in actully, change nothing, but scroll down your page. you’ll find the hover issue on menu gone.

Demo for rotate element covered absolute element:

http://jsfiddle.net/rainthinks/xswrg/

the fix: http://jsfiddle.net/rainthinks/xswrg/1/

some refs:

• http://daneden.me/2012/04/css-transforms-and-z-index/
• http://www.w3.org/TR/css3-2d-transforms/