Question

我正在尝试使用下拉菜单构建一个CSS菜单，例如：

MENU1 MENU2 MENU3 Item1 Item1 Item1 Item2 Item2 Item2 Item3 Item3 ITEM4

菜单栏是一个UL，带有进一步的li和子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

Answer 1

CSSPlay有各种菜单示例您可能会发现可以用作模板的内容。

Answer 2

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>

CSS下拉菜单问题

2 个答案: