此菜单(http://thepiratehenk.nl/pgwe/)的问题在于,当我将子菜单拖到右侧时,它会消失。
(它在Internet Explorer中也不起作用;这是下一个要修复的问题。)
答案 0 :(得分:4)
添加以下CSS规则:
.navi nav > ul > li:hover {
z-index: 2;
}
这可确保当前菜单项及其子菜单始终显示在其他菜单项的上方。
两个主要问题
问题#1
问题#1是由:hover
上的li
引起的,但是对其中的a
标记执行轮换(没有:hover
并且轮换为相同的元素)。这可以通过以下两种方式之一解决:
1a上。暂时给出当前菜单项(鼠标结束)比任何其他菜单项更大的z-index值。使用li:hover
单独使用CSS可能是可行的。
1b中。旋转菜单li
而不是a
标记,然后取消旋转其中的子菜单ul
标记(以便:hover
和旋转位于同一元素上)。
问题#2
每个菜单项的底角位于上一个菜单项的子菜单上方。子菜单应始终位于所有菜单项之上。
上面提到的1a解决方案也可以解决问题#2(将菜单li
的z-index设置为z-index
上更大的:hover
。
次要问题
上述评论和@blackhawk提到的另一个问题是将.naarlinks
div
直接嵌套在ul
标记内。现在看起来这实际上与上述问题无关,但是这样做仍然不安全。除了在某些浏览器中导致奇怪行为的风险之外,它还会阻止HTML验证。
.naarlinks
div
似乎只有padding-left: 100px;
。我不确定该样式是否生效,因为div
嵌套不正确,但如果确实需要该样式,可以尝试以某种方式将其添加到子菜单ul
。 / p>
首先,我建议您只需删除.naarlinks
div
,然后查看它对页面的影响。然后,查看是否需要在子菜单ul
标记中添加任何样式以进行更正。
删除div
后,尝试将子菜单ul
中的填充更改为以下内容:
.navi nav li ul {
padding: 3px 10px 3px 110px;
}
答案 1 :(得分:1)
您不能将div元素作为无序列表中的第一个子元素。这就是你的网页被破坏的原因。
无序列表的基本结构通常如下所示......
<ul>
<li></li>
<li></li>
</ul>
不喜欢这个......
<ul>
<div>
<li></li>
<li></li>
</div>
</ul>
但要回答你的问题 - 你在css中缺少一个小小的东西......
.navi nav li ul:hover { 显示:块 }