我只在CSS文件中创建了一个下拉菜单,我需要它才能在Mozilla,Chrome,Safari和IE8中正常工作至少6个!
这里是我的html
的快照<div id="menu-content">
<ul id="main-list">
<li class='main-li' style='width:65px'><a href='javascript:void(0)'>FICHEROS</a>
<ul class='sub-list'>
<li><a href='../../MODULOS/FICHERO/nuevo_contacto.asp'>NUEVA CUENTA - CONTACTO</a></li>
<li><a href='../../MODULOS/FICHERO/nueva_cuentaf.asp'>NUEVA FARMACIA</a></li>
</ul>
</li>
<li class='main-li' style='width:175px'><a href='javascript:void(0)'>MODULO DE APROBACIONES</a>
<ul class='sub-list'>
<li><a href='../../MODULOS/APROBAR/aprobar_contacto.asp'>APROBAR CONTACTO</a></li>
<li><a href='../../MODULOS/APROBAR/aprobar_contactof.asp'>APROBAR FARMACIA</a></li>
</ul>
</li>
</ul>
</div>
这就是我的CSS
#menu-content {
width: 100%;
height: 18px;
background-color:#000;
}
#main-list {
color:#FFFFFF;
margin:0px;
padding:0px;
font-family:Verdana;
font-weight:bolder;
font-size:10px;
height:18px;
width: 100%;
}
.main-li{
border-right-width: 1px;
border-right-color: #FFF;
border-right-style: solid;
margin-top:3px;
float:left;
display:block;
text-align:center;
list-style-type:none;
}
.main-li a {
text-decoration:none;
color:#FFF;
border:none;
padding: 1px;
background-color:#8F3221;
}
.main-li:hover ul.sub-list {
display:block;
}
.sub-list {
margin-top:3px;
margin-bot:3px;
background-color:#8F3221;
width:300px;
padding:0px;
display:none;
border-top-style:solid;
border-bottom-width:3px;
border-top-color:#FFF;
border-top-width:1px;
}
.sub-list li {
text-align:left;
margin:0;
list-style-type:none;
}
.sub-list li a {
text-decoration:none;
display:block;
color:#FFF;
border:none;
}
.sub-list li:hover a {
color:#000;
}
现在我将告诉你结果!
在IE8中,Chrome,Safari和Mozilla看起来像这样:
我在左边有“边距”我没有定义!不知道为什么!
在IE7中看起来像这样:
正如你所看到的,我没有像上图所示的左边距(伟大!),而是菜单显示自己应该在右边一点点!为什么?
IE6中的las(也是最糟糕的):
这里我没有左边距...但内容div高度改变(你可以看到BG颜色),它让父亲LI宽度增长!!!不知道为什么!!!
BTW我的文档类型 'HTML 4.01 // EN“”http://www.w3.org/TR/html4/strict.dtd“'
非常感谢!!!