Проблемы с совместимостью выпадающего меню - PullRequest
Новая
       35

Проблемы с совместимостью выпадающего меню

0 голосов
/ 21 марта 2012

Я сделал выпадающее меню, основанное только на файле 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:

IE6

Здесь у меня нет левого поля ... но высота содержимого div изменяется (вы можете видеть цвет BG), и это также увеличивает ширину LI отца !!! Не знаю почему !!!

Кстати, мой тип документов 'HTML 4.01 // EN "" http://www.w3.org/TR/html4/strict.dtd"'

Спасибо всем !!!

...