水平嵌套李菜单

我试图设计一个横向菜单只是用CSS水平嵌套李菜单

CSS类是

li.navMenuParent：顶级别菜单项
li.navMenuActiveParent：顶级ACTIVE菜单项
li.navMenuNode：顶级菜单该好好尝试一下有子项
li.Active项目：子级别的活动菜单项

我希望菜单总是显示子级菜单时，家长有一个navMenuActiveParent元素。（超过2Parent的INTIAL状态悬停）

.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的工作。

感谢您的帮助！

来源

2011-08-04 Lukie

不知道这是你在找什么，但这可能有助于http://www.justsoftwaresolutions.co.uk/articles/css_menus.html – Side

不完全是，但它是一个有趣的文章。 – Lukie

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

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

提醒你，我没有重置大部分的东西，因为做的jsfiddle为你，我会reccommend默认复位css文件太多，如果你不喜欢，神，在CSS。

它只能在IE中以怪癖模式死亡，但通过遵守标准和/或使用X-UA兼容标头（谷歌），很容易阻止人们以怪癖模式查看您的网站。

我相信你可以自己计算，其余出去，否则让我知道:)

（顺便说一句哦，你最好是使用这种背景下箭头一shorttag在菜单项的背景：颜色URL（'path.jpg '）posx posy重复;）

来源

2011-08-16 17:52:23 sg3s

太好了，谢谢你的帮助。 – Lukie

水平嵌套李菜单

回答

相关问题