我有一个用HTML和CSS制作的水平菜单(即使项目在.NET framework-asp和c#上),它应该显示为垂直 盘旋时的子菜单项。 但这不会作为子菜单项发生 水平对齐并扰乱布局的其余部分,以及 影响不受欢迎的设计。
到目前为止,这是我的代码:
HTML:
<div id="menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About Us</a>
<ul class="firstLevel">
<li>
<a href="#">The Team</a>
</li>
<li>
<a href="#">History</a>
</li>
<li>
<a href="#">Vision</a>
</li>
</ul>
</li>
<li>
<a href="#">Products</a>
<ul class="firstLevel">
<li>
<a href="#">Cozy Couch</a>
</li>
<li><a href="#">Great Table</a>
</li>
<li>
<a href="#">Small Chair</a>
</li>
<li>
<a href="#">Shiny Shelf</a>
</li>
<li>
<a href="#">Invisible Nothing</a>
</li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul class="firstLevel">
<li>
<a href="#">Online</a>
</li>
<li>
<a href="#">Right Here</a>
</li>
<li>
<a href="#">Somewhere Else</a>
</li>
</ul>
</li>
<li>
<a href="#">Account</a>
<ul class="firstLevel">
<li>
<a href="#">Login</a>
</li>
<li>
<a href="#">Register</a>
</li>
</ul>
</li>
</ul>
</div>
CSS:
#menu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#menu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#menu li ul {
position:relative;
}
#menu ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#menu ul li a:hover {
background:#369;
color:#fff;
}
#menu ul li a.active,
#menu ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
li:hover ul {
display: block;
position: absolute;
}
这就是它的表现:
答案 0 :(得分:1)
jsfiddle here http://jsfiddle.net/Ec98p/
尝试使用此css
#menu{
border:1px solid red;
height:30px;
}
#menu ul {
list-style:none;
margin:0;
padding:0;
position:relative;
text-align:center;
}
#menu ul li {
display:block;
float:left;
list-style:none;
margin:0 2px 0 0;
padding:0;
position:relative;
}
#menu li ul {
position:absolute;
display:none;
border:1px solid green;
}
#menu ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#menu ul li a:hover {
background:#369;
color:#fff;
}
#menu ul li a.active,
#menu ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#menu ul li:hover ul {
display: block;
}
#menu ul li ul li {
margin:0 1px 0 0;
display:block;
float:none;
}
#menu ul li ul li a{
display:block;
}