html - li :hover 上的 css 子菜单问题

Question

我遇到了一个偶尔会出现的问题。

当我将鼠标悬停在菜单项“produkter”上时，应该会出现一个子菜单。 我应该被允许在子菜单上向下移动鼠标光标。大多数时候它都有效，但有时当我将鼠标移动到子菜单时它会消失。

这是一个演示页面的链接

http://newp.dk.s1.piranya.dk/

我使用了本教程中的一种技术。但是我看不出我做错了什么

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

谁能发现错误？

这是菜单的整个CSS

ul#piranya-menu-1
{
padding: 0px;
margin: 0px;
list-style: none;
margin: 0 auto 0 auto;
width: auto;
line-height: 1.5em;
width: 750px;
position: relative;
display: inline-table;
}
ul#piranya-menu-1:after
{
content: "";
clear: both;
display: block;
}
ul#piranya-menu-1 > li
{
float: right;
height: 100%;
}
ul#piranya-menu-1 > li > a
{
padding: 0px 10px;
color: white;
font-weight: normal;
text-decoration: none;
font-size: 16px;
font-family: Verdana;
height: 100%;
vertical-align: middle;
line-height: 70px;
display: block;
}
ul#piranya-menu-1 > li:hover
{
background: url('/image/1297') repeat-x;
}
ul#piranya-menu-1 > li:hover > a
{
color: black;
}
ul#piranya-menu-1 > li:hover > ul
{
display: block;
}

ul#piranya-menu-1 > li.piranya-menu-item-selected-root a
{
background: url('/image/1297') repeat-x;
color: black;
}
/*Submenu*/
ul#piranya-menu-1 > li > ul
{
display: none;
background-color: white;
position: absolute;
top: 100%;
list-style: none;
padding: 20px;
}
ul#piranya-menu-1 > li > ul li
{
float: none; 
position: relative;
}
ul#piranya-menu-1 > li > ul a
{
color: black;
}

Answer 1

我发现了问题。

这是一个类为“tp-bannertimer”的 div……它是隐藏的，但它就在那里。

这个 div 宽度在增加，当 div 出现在这个菜单项下面时，它实际上在这个子元素(子菜单)之上，所以你将这个 div 和子菜单悬停在“刹车”上。你可以看到我拍摄的这张图片上发生了什么。您还可以看到它的 z-index 是 20000，在子菜单 z-index 下获取它的 z-index，这应该可以解决您的问题。

右键单击 img 并按“查看图像”以查看全尺寸图像。

希望我能帮到你，如果我还没有把它写得最清楚，请问:)