Question

我正在尝试使用CSS设计水平菜单

CSS类是

li.navMenuParent：顶级菜单项
li.navMenuActiveParent：顶级ACTIVE菜单项
li.navMenuNode：没有子项目的顶级菜单项
li.Active：子级别ACTIVE菜单项

我希望菜单在父级具有navMenuActiveParent元素时始终显示子级菜单。（初始状态悬停在2Parent上）

.navmenu ul li.navMenuActiveParent > ul
{
display: inline;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}

但是，当用户将鼠标悬停在顶级菜单项上时，我希望隐藏该子菜单。（将鼠标悬停在HOME菜单项上）

 .navmenu li.navMenuParent ul
 {
   display: none;  -- I want this applied to ALL <ul> under .navMenu
 }

当用户将鼠标悬停在顶级菜单项上时，我希望子菜单显示正确的子菜单。（将鼠标悬停在1Parent上）

 .navmenu li.navMenuParent:hover ul, .navmenu li.navMenuParent.hover ul
 {
   position: absolute;
   display: inline;
   left: 0;
   width: 100%;
   margin: 0;
   padding: 0;
 }

我似乎无法使用纯CSS。

感谢您的帮助！

Answer 1

诀窍是使用尽可能少的标记将正确的效果应用于正确的元素。

http://jsfiddle.net/EGNKE/74/

请注意，我没有重置大部分内容，因为jsFiddle会为你做这件事，如果你不喜欢，我会在css默认重置css文件。

它只会在IE中以怪癖模式消亡，但很容易阻止人们以怪癖模式查看您的网站，方法是遵守标准和/或使用X-UA兼容标题（google it）。

我相信你可以自己解决剩下的问题，或者让我知道：）

（哦，顺便说一句，你最好在菜单项背景中使用短标签背景箭头：color url（'path.jpg'）posx posy repeat;）

水平嵌套LI菜单

1 个答案: