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

使填充和边距为0;并提供代码，以便我能理解任何其他问题。

Answer 2

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

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

在实际操作中，不做任何改动，而是向下滚动页面。你会发现菜单上的悬停问题已经消失。

旋转元素的演示涵盖绝对元素：

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

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

一些参考：

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

2 个答案:

旋转元素的演示涵盖绝对元素：