水平嵌套李菜單

我試圖設計一個橫向菜單只是用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

水平嵌套李菜單

回答

相關問題