Width auto não funcionando no IE

[licebitencourt 0]

Oi pessoal queria saber se alguém pode me ajudar!

Fiz um menu DropLine aquele que quando passamos o mouse gera submenus horizontais.

 

Não estou conseguindo fazer funcionar no ie6, os submenus (caem) e acabam ficando na vertical!

se eu colocar width no ul deles irá funcionar, mas eu não queria forçar isso, queria que ele renderizasse automaticamente igual nos outros navegadores!

ALGUEM tem idéia do que eu posso fazer?

 

Obrigada

[William Bruno 1501]

display: inline-block; nos itens do menu

[alcaidedigital 57]

O IE6 não trabalha como os outros navegadores... nem a microsoft dar mais suporte para ele... Aconselho você simplesmente não continuar com isso...

 

http://www.senartes.com.br/noticiasDetalhes.php?YVdRPQ=TkE9PQ

[licebitencourt 0]

Já tentei tb, ele nao sobe, da certo de jeito nenhum!

já tentei até um script para calcular automaticamente o tamanho da div mas ta difícil!!

 

Alguem tem alguma solução???

[William Bruno 1501]

Poste um link pro site, para analisarmos ai.

 

você tentou dar inline-block; nos LIs do menu ?

[licebitencourt 0]

Eu ainda não tenho hospedado mas vou posta o codigo para vcs verem =p

Não assustem mas o menu realmente é grande

 

 

HTML:

 <div id="menu">

    <ul id="nav">
       	<li><a class="Current" href="#" title="Home"> Lorem ipsum</a></li>
           <li> <a href="#" title="Sobre a r">Sobre a r</a>

               <ul class="Sub">

               	<li><a href="#" title="O Grupo">O Lorem ipsum</a> </li>
                   <li><a href="#" class="MostraLink TxtCor10" title="r no Brasil">r no Lorem ipsum</a> 


                     <span class="SubLink">

                       	<img class="FlutuaC" src="icon.arrow06.png" alt="Seta" title="Seta"/>

                           <ul>
							<li><a href="#"> Propósito, Visão e Valores </a></li>
                               <li class="NoBorder"><a href="#" >  Estrutura </a></li>
                           </ul>

                  		 </span>   

                   </li>


                   <li class="NoBorder"> <a href="#" title="r no mundo">r no mundo </a></li>

             </ul>

 </li>
           <li> <a  href="#" title="Lorem ipsum">Lorem ipsum</a> 
               <ul  class="Sub Sub01">
               	<li> <a href="#" title="Lorem ipsum">Lorem ipsum</a> </li>
                   <li class="NoBorder"> <a href="#" title="Política de qualidade">Lorem ipsum</a></li>
             </ul>
 </li>

           <li><a href="#" title="Lorem ipsum"> Lorem ipsum </a>
               <ul class="Sub Sub02">
               	<li><a href="#" title="Lorem ipsum"> Lorem ipsum</a> </li>
                   <li class="NoBorder"> <a href="#" title="Lorem ipsum">Clientes</a> </li>
             </ul>   
 </li>

           <li> <a href="#" title="Tecnologia">Tecnologia</a> 
               <ul class="Sub Sub03">
               	<li> <a href="#" title="Diferenciais">Diferenciais </a></li>
                   <li> <a href="#" title="Certificações">Certificações </a></li>
                   <li class="NoBorder"> <a href="#" class="MostraLink TxtCor16" title="Processo de produção">Processo de produção </a>

                    <span class="SubLink">

                       	<img class="FlutuaC" src="Repositorio/Templates/Geral/images/icon.arrow06.png" alt="Seta" title="Seta"/>

                           <ul>
							<li><a href="#"> r </a></li>
                               <li class="NoBorder"><a href="#" >  r  </a></li>
                           </ul>

                  		 </span>   

                   </li>
             </ul>   

</li>
           <li> <a href="#" title="Lorem ipsum">r</a></li>
           <li> <a href="#" title="Lorem ipsum">Lorem ipsum</a>
               <ul  class="Sub Sub04"> 
               	<li> <a href="#" title="r sustentável">r sustentável </a> </li>
                   <li><a href="#" title="r social"> Responsabilidade social </a></li>
                   <li><a href="#" title="Responsabilidade ambiental"> Responsabilidade ambiental </a></li>
                   <li class="NoBorder"><a href="#" title="Responsabilidade econômica"> Responsabilidade econômica </a></li>
             </ul>
 </li>
           <li><a href="#" title="Notícias"> Lorem ipsum</a> 
               <ul  class="Sub Sub05">
               	<li class="NoBorder"> <a href="#" title="Saiba o que acontece na r">Saiba o que acontece na r</a></li>
             </ul>
 </li>
           <li><a href="#" title="Pessoas"> Lorem ipsum</a> 
               <ul class="Sub Sub06"> 
               	<li> <a href="#" title="Educação">Lorem ipsum</a></li>
                   <li> <a href="#" title="Lorem ipsum">Lorem ipsum</a></li>
                   <li> <a href="#" title="Lorem ipsum">Lorem ipsum</a> </li>
                   <li> <a href="#" title="Lorem ipsum">Lorem ipsum </a></li>
                   <li> <a href="#" title="Lorem ipsum">Lorem ipsum </a></li>
                   <li class="NoBorder"> <a href="Lorem ipsum" title="Indústria do conhecimento">Indústria do conhecimento </a></li>
          </ul>
</li>
           <li class="NoBorder"><a href="#" title="Lorem ipsum"> Lorem ipsum</a>
           	 <ul class="Sub Sub07"> 
               	<li> <a href="#" title="Educação">Entre em Contato </a></li>
                   <li class="NoBorder"> <a href="#" title="Saúde e segurança">Localização </a></li>

          </ul>



            </li>
      </ul>
</div><!-- / menu -->

 

 

CSS

/*Menu*/
#menu{
background:url(../images/bck.menu.jpg) no-repeat; 
height:37px;
width:984px;
position:relative;
}

#menu ul{ 
margin:0px 5px 0 15px;
padding:5px 0 0 0;
display:block;
}



ul#nav li {
float:left;
display:block;	
line-height:18px; 
letter-spacing:-1px;
padding:2px 15px 0 5px; 
margin:2px 0 0 0;
border-right:1px #e1e1e0 solid;
	 width:auto;

}



ul#nav li a.Current {
background:url(../images/img.currentmenu.png) no-repeat center 25px;
color:#0092ff;
padding:0px 0 30px 0;
}

ul#nav li a {
padding:20px 0px 10px;
position:relative;
text-decoration:none;
z-index:99999;
font-family: SansationRegular, Verdana, Geneva, sans-serif;
font-size:13px;
text-transform:uppercase;
color:#617c8e;
text-decoration:none;
 width:auto;


}

.NoBorder{ border:none !important;}


/* submenu */

#nav ul.Sub {
position:absolute; 
display:none;
background:#dedad0;
left:0%;
top:36px;
z-index:100;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin:0;
height:30px;



}




#nav ul.Sub01{
left:10%!important;
}
#nav ul.Sub02{
left:25%!important;
}

#nav ul.Sub03{
left:30%!important;
}

#nav ul.Sub04{
left:30%!important;
}

#nav ul.Sub05{
left:70%!important;
}

#nav ul.Sub06{
left:25%!important;
}
#nav ul.Sub07{
left:78%!important;
}


ul#nav li ul.Sub li {
float:left;
margin:0;
padding:4px;
border-right:1px #eeece7 solid;
width:auto;
display:block;



}


#nav ul.Sub li a{
font-family:HelveticaRegular, Verdana, Geneva, sans-serif;
color:#616d76;
text-transform:none;
float:left !important;
display:block;  
padding:0 10px; 
background:transparent; 
outline:none;
height:20px;
 width:auto;



}

#nav ul.Sub li a:hover {
background:none!important;
margin:0!important;
color:#252728;


}

#nav span{ 
background:#d2cec5;
display:block;
float:left;
height:30px;
margin:-5px 0 0 0;

}

#nav span.SubLink ul li a {
margin:-4px 0 0 -10px;
float:left!important;

}

#nav span.SubLink ul li a:hover{
	margin:-4px 0 0 -10px!important;
}

#nav span.SubLink img { padding:9px 0 0 5px;}
#nav span.SubLink ul{ float:left;}

[Evandro Oliveira 331]

Bruno, no IE6, inline-block só funciona em elementos de linha.

 

@licebitencourt, refaça o CSS. Não funcionou no Opera.

 

Defina os LI filhos como inline e os a como inline-block

 

 

ul ul li { display: inline; }

ul ul a { display: inline-block; }

 

Faça todas as modificações que seriam feitas em ul ul li em ul ul a