[英]<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.