问题下拉菜单兼容性

时间:2012-03-21 15:33:00

标签: css internet-explorer google-chrome safari mozilla

我只在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看起来像这样: Chrome IE8 Safari Mozilla

我在左边有“边距”我没有定义!不知道为什么!

在IE7中看起来像这样: IE7

正如你所看到的,我没有像上图所示的左边距(伟大!),而是菜单显示自己应该在右边一点点!为什么?

IE6中的las(也是最糟糕的):

IE6

这里我没有左边距...但内容div高度改变(你可以看到BG颜色),它让父亲LI宽度增长!!!不知道为什么!!!

BTW我的文档类型     'HTML 4.01 // EN“”http://www.w3.org/TR/html4/strict.dtd“'

非常感谢!!!

0 个答案:

没有答案