1

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

菜单 1 菜单 2 菜单 3 项目 1 项目 1 项目 1 项目 2 项目 2 项目 2 项目 3 项目 3 项目 4

菜单栏是一个 UL，其中包含用于菜单下拉菜单的更多 li 和 sub UL。我已经编写了 CSS，并且下拉菜单出现在菜单悬停时，但是一旦我尝试浏览下拉列表，菜单就会消失。显然是因为我在 Menu hover 上设置了 css hover 属性。我试图只使用 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
4

2 回答 2

2

CSSPlay有多种菜单示例。
您可能会找到可以用作模板的东西。

于 2012-04-25T19:24:59.590 回答
1

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-25T19:51:32.777 回答