我一直在构建一个 CSS 下拉菜单,但遇到了一点小问题,想知道是否有人可以帮我解决这个问题。我有一个包含此 HTML 的菜单
<div id="menu">
<ul>
<li><a class="active" href="#">Home</a>
<ul class="sub-menu">
<li><a href="#">This is sub</a></li>
<li><a href="#">sub menu item</a></li>
<li><a href="#">This is a long sub menu item</a></li>
</ul>
</li>
<li><a href="#">Location</a></li>
<li><a href="#">another link</a></li>
</ul>
</div>
当前,当我将鼠标悬停在主要 <li>
上时“主页”的宽度扩展了很多,我认为是为了容纳我拥有的子类菜单。我怎样才能阻止这种情况发生?实现类似的目标:
|首页|//漂亮的短主选项卡
|子菜单链接|
|另一个子菜单链接|
与当前正在发生的情况相反(请原谅我图表的粗糙)
|首页......................|//很长一段时间把所有东西都搞乱了 tab
|子菜单链接|
|另一个子菜单链接|
这是我的菜单 CSS 代码:
#menu ul {
margin: 0;
list-style: none;
padding: 0 0 0 20px;
position: relative;
z-index: 40;
}
#menu ul li {
float: left;
padding: 10px 10px 13px 0;
position: relative;
z-index: 50;
}
#menu li a {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
最佳答案
我有基本相同的标记,所以下面的代码应该能很好地满足您的需要。
我留下了所有的颜色和图像信息,以备不时之需。
#menu {
background: none repeat scroll 0 0 #333333;
border: 0 none;
font: bold 14px "Lucida Sans Unicode","Bitstream Vera Sans","Trebuchet Unicode MS","Lucida Grande",Verdana,Helvetica,sans-serif;
margin: 0;
padding: 0;
width: 100%;
}
#menu ul {
background: none repeat scroll 0 0 #333333;
height: 35px;
list-style: none outside none;
margin: 0 0 3px;
padding: 0;
width: 100%;
}
#menu li {
float: left;
padding: 0;
}
#menu li a {
background: no-repeat scroll right bottom #333333;
color: #CCCCCC;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0;
padding: 0 10px;
text-align: center;
text-decoration: none;
}
#menu li a:hover, #menu ul li:hover a {
background: no-repeat scroll center bottom #2580A2;
color: #FFFFFF;
text-decoration: none;
}
#menu li ul {
background: none repeat scroll 0 0 #333333;
border: 0 none;
display: none;
height: auto;
margin: 0;
padding: 0;
position: absolute;
width: 225px;
z-index: 200;
}
#menu li:hover ul {
display: block;
}
#menu li li {
display: block;
float: none;
margin: 0;
padding: 0;
width: 225px;
}
#menu li:hover li a {
background: none repeat scroll 0 0 transparent;
}
#menu li ul a {
display: block;
font-size: 12px;
font-style: normal;
height: 35px;
margin: 0;
padding: 0 10px 0 15px;
text-align: left;
}
#menu li ul a:hover, #menu li ul li:hover a {
background: no-repeat scroll left center #2580A2;
border: 0 none;
color: #FFFFFF;
text-decoration: none;
}
关于CSS 下拉菜单主选项卡问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7066790/