菜单切换效果和子菜单悬停区域

Question

我在设置顶部下拉菜单 here 的样式时遇到了一些麻烦，以便它产生切换效果。我正在使用填充来划定悬停区域，但是我没有机会将鼠标悬停在子菜单上。

#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

将z-index: larger-number 添加到#topmenu 以确保菜单始终位于顶层，因此可以将其悬停。

css 转换会改变 z-index 的顺序。你在h2 上使用过它。它涵盖了子菜单。

实际上，什么都不做，而是向下滚动页面。你会发现菜单上的悬停问题消失了。

rotate element的演示涵盖了absolute element：

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

修复：http://jsfiddle.net/rainthinks/xswrg/1/

一些参考：

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

Answer 2

使内边距和外边距为 0；并给出代码以便我理解其他问题。