[英]<LI> under <UL> width not 100% on IE7
我再次遇到了IE问题。 我有一个下拉菜单,其中<LI>
项垂直位于其下方,并且上面的<UL>
具有背景色。 <LI>
具有悬停背景颜色,因此我绝对需要它来填充整个宽度,但仅在IE上不起作用。
我正在研究的示例在这里 。 将鼠标置于“资源”菜单项上。 它在FF上效果很好,但在IE(duh)上效果不好。
#menu {
margin:0px auto;
padding:0px;
width: auto;
display: block;
list-style:none;
white-space: nowrap;
position: relative;
}
#menu li {
display:inline;
margin-left:40px;
margin-right:0px;
margin-top:10px;
margin-bottom:0px;
padding:0px 0px 0px 0px;
list-style:none;
position: relative !important;
}
#menu li a:link, #menu li a:visited {
color:#fff;
text-decoration:none;
font-size:12px;
padding-bottom: 3px;
text-transform: uppercase;
}
#menu li a:hover {
color:#ddd;
}
#menu li a:active {
position:relative;
top:1px;
color:#fff;
}
.submenu {
position:absolute;
left: -9999px;
display: block;
background-color:#906117;
padding:0px 0px 0px 0px;
margin: 0px;
top:15px;
z-index: 20;
}
#menu li:hover .submenu {
left: -5px;
}
.submenu li {
text-align: left !important;
margin:0px !important;
padding: 3px 0px 5px 0px !important;
float: left;
display: block;
width: 100%;
position:relative;
border: 1px solid #333;
}
.submenu li:hover {
background-color: #f79c10;
}
.submenu li a:link, .submenu li a:visited {
color:#fff !important;
font-size:12px !important;
padding: 0px !important;
margin: 0px !important;
white-space:nowrap;
display: block;
padding:3px 7px 5px 7px !important;
min-width: auto;
zoom: normal;
}
.submenu li a:hover, .submenu li a:active {
color:#fff !important;
}
CSS:
#menu .submenu li {
display: block;
width: auto;
float: none;
}
对您的LI
使用float:left
,并将所有其他样式移至A
标签。 将display:block
添加到您的A
标签。
记住在菜单后清除浮子。
内联显示通常不会扩展到整个宽度。 尝试将其设置为
display:inline-block
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.