CSS下拉菜單的問題

我試圖建立與下拉菜單一個CSS菜單，是這樣的：CSS下拉菜單的問題

MENU1 MENU2 MENU3 項目1項目1項目1 項目2項目2項目2 項目3項目3 項目4

的菜單欄是UL有更多的鋰和UL UL菜單下拉菜單。我寫了CSS，菜單懸停時發生下拉菜單，但只要我嘗試瀏覽下拉菜單，菜單就會消失。很明顯，因爲我在菜單懸停上設置了CSS懸停屬性。我試圖只使用CSS。你能指導我該怎麼做，以保持菜單下拉菜單可見，而我通過下拉項目？

這裏是我的CSS：

#menuNav{width:100%; position:relative; height:28px; list-style:none;} 
#menuNav li{float:left; position:relative;} //MENU1, MENU2, MENU3 
#menuNav li ul{position:absolute; visibility:hidden; width:100px;} //Each Dropdown is a UL 
#menuNav a{display:block;} 
#menuNav li:hover ul, #menuNav a:hover ul{visibility:visible;} //Show dropdown on MENU hover

來源

2012-04-25 Blueboye

沒關係。我的代碼有效。它正在隱藏Div的後面，因此在我試圖瀏覽列表時自動關閉。隨意使用上面的代碼。 – Blueboye 2012-04-25 20:11:24

CSSPlay有各種各樣的菜單的例子。
你可能會發現一些你可以用作模板的東西。

來源

2012-04-25 19:24:59

是的 - 沒有必要重塑*這個*輪。 – Faust 2012-04-25 19:26:43

太好了。但是，我可以添加到現有的CSS中以使其工作嗎？我已經有90％了。這只是一件不起作用的事情。 – Blueboye 2012-04-25 19:45:24

當你閱讀網站上的一些內容時，你會明白該做什麼以及爲什麼而不是僅僅獲得一個解決方案，並在以後再次遇到同樣的問題，因爲你不知道背景。 – 2012-04-25 19:51:07

CSS

<style> 
#navMenu{ 
margin:0; 
padding:0; 
} 
#navMenu ul{ 
margin:0; 
padding:0; 
line-height:30px; 
} 
#navMenu li{ 
margin:0; 
padding:0; 
list-style:none; 
float:left; 
position:relative; 
background:#3A4956; 
} 
#navMenu ul li a{ 
text-align:center; 
color:black; 
text-decoration:none; 
font-family:"Comic Sans MS"; 
height:30px; 
width:150px; 
display:block; 
border-bottom:1px black solid; 
} 
#navMenu ul li a:hover{ 
color:white; 
} 
#navMenu ul ul{ 
position:absolute; 
visibility:hidden; 
} 
#navMenu ul li:hover ul{ 
visibility:visible 
} 
#wrapper1{ 
border-radius:8px 0 0 0; 
border-right:1px black solid 

} 
#wrapper4{ 
border-radius:0 8px 0 0; 
} 
</style>

HTML

<div id="wrapper"> 
<div id="navMenu"> 
<ul style="height: 30px; width: 308px"> 
<li id="wrapper1" style="left: 0px; top: 0px; width: 150px; height: 31px"><a style="color:black" href="#">Products</a> 
<ul> 
<li id="wrapper3"><a href="#">Link 1</a></li> 
<li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 
<li><a href="#">Link 4</a></li> 
<li><a href="#">Link 5</a></li> 
<li><a href="#">Link 6</a></li> 
</ul> 
</li> 
<li id="wrapper4"><a style="color:black" href="#">Products</a> 
<ul> 
<li id="wrapper3"><a href="#">Link 1</a></li> 
<li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 
<li><a href="#">Link 4</a></li> 
<li><a href="#">Link 5</a></li> 
<li><a href="#">Link 6</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</div>

來源

2012-04-25 19:51:32 Enve

CSS下拉菜單的問題

回答

相關問題