Bug no submenu

[italogabriel 0]

Olá pessoal to tentando criar um submenu mais não to conseguindo fica dando isso

 

http://www.imagemhost.net/tG.jpg

 

Código HTML

     <div id="menu">
       <ul>
        <li><a href="#">LOOKBOOK</a>
          <ul>
             <li><a href="#">Inverno</a></li>
             <li><a href="#">Verão</a></li>
             <li><a href="#">Outono</a></li>
          </ul>
        
        </li>
        <li><a href="#">EDITORIAIS</a>
          <ul>
             <li><a href="#">Inverno</a></li>
             <li><a href="#">Verão</a></li>
             <li><a href="#">Outono</a></li>
          </ul>
        
        </li>
        <li><a href="#">CATÁLOGOS</a></li>
        <li><a href="#">CAMPANHAS</a></li>
        <li><a href="#">LOJAS</a></li>
        <li><a href="#">SOBRE ALEGALE</a></li>
        <li><a href="#">CONTATO</a></li>    
       </ul> 
     </div><!--FIM DA DIV MENU -->

Código CSS

#menu {width:100%; height:34px; position:relative; float:left; background:#2a2b2e;}

#menu ul {list-style:none; margin-left:auto; margin-right:auto; display:table;}

#menu ul li {float:left; padding:9px 6px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:13px;}

#menu ul li a {text-decoration:none; color:#e6e6e6;}

#menu ul li a:hover {color:#FFF;}

#menu li{float:left;}

#menu li a{display:block; padding:0 15px; height:10px; text-decoration:none; color:#FFF;}

#menu li ul{display:none; position:absolute; top:34px; left:0; width:100%; background:#333;}

#menu li:hover ul{display:block;}

Espero que me ajudem, estou desesperado, preciso muito disso! :/

[William Bruno 1501]

desculpa, não entendi.

 

olhei a imagem e não vi nada demais. Qual o erro ai ?

[italogabriel 0]

concertei, desculpe minha falta de atenção

[William Bruno 1501]

adicione isso:

#menu ul li { position: relative; }

[italogabriel 0]

acontece isso http://www.imagemhost.net/vG quero ele na horizontal

[William Bruno 1501]

remova o float uê.

#menu ul li li { float: none; }

[italogabriel 0]

agora fica assim

http://www.imagemhost.net/wG.jpg

 

se quiser te mando os arquivos do site para você dar uma olhada

[Buchechafs 6]

isso é problema de z-index.

A z-index do banner está maior que a do submenu

Tente colocar a div do sub menu com uma z-index:99999999;

[italogabriel 0]

isso é problema de z-index.

A z-index do banner está maior que a do submenu

Tente colocar a div do sub menu com uma z-index:99999999;

 

não foi, o menu ainda continua oculto, mais eu tbm queria que o menu fica-se na horizontal

[zcommand 7]

 

não foi, o menu ainda continua oculto, mais eu tbm queria que o menu fica-se na horizontal

 

ei cara fiz algumas modificações no seu código, mas se funcionar vai dar para vc ter uma ideia de omo fazer, desculpe mas não sou muito bom em explicar então vou postar o código

 

css

 

 

#menu {width:100%; height:34px; float:left; background:#2a2b2e;}

#menu ul {list-style:none; margin-left:auto; margin-right:auto; position:relative;}

#menu ul li {float:left;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:13px;}

#menu ul li a {text-decoration:none; color:#e6e6e6; display: block; padding:0px 15px;}

#menu ul li a:hover {color:#FFF;}

#menu ul li:hover {color:#ccc;}

#menu li span{display:none; position:absolute; top:18px; left:0; width:100%; background:#333; padding: 15px 0;}

#menu li:hover span{display:block;}

#menu li span a {

display: inline;

color:#ccc;

}

#menu li span a:hover {

text-decoration: underline;

}

html

<div id="menu">

<ul>

<li><a href="#">LOOKBOOK</a>

<span>

<a href="#">Inverno</a>

<a href="#">Verão</a>

</span>

</li>

<li><a href="#">EDITORIAIS</a>

<span>

<a href="#">Inverno</a>

<a href="#">Verão</a>

<a href="#">Outono</a>

</span>

</li>

<li><a href="#">CATÁLOGOS</a></li>

<li><a href="#">CAMPANHAS</a></li>

<li><a href="#">LOJAS</a></li>

<li><a href="#">SOBRE ALEGALE</a></li>

<li><a href="#">CONTATO</a></li>

</ul>

</div><!--FIM DA DIV MENU -->

[italogabriel 0]

ainda continua bugado, ehaeuaaeh ta complicado

 

print

http://www.imagemhost.net/mH.jpg

 

se quiserem envio os arquivos do meu site, sem problema nenhum!

[zcommand 7]

me passa lá veii, zcommand@hotmail.com

[italogabriel 0]

zCommand já te mandei!

[zcommand 7]

Ítalo seu código está funcionando aqui!

[italogabriel 0]

Ítalo seu código está funcionando aqui!

aqui também! acho que vou bug no meu apache que não deixou eu ver o resultado na hora, o foda que não ta centralizando o menu

[zcommand 7]

aqui também! acho que vou bug no meu apache que não deixou eu ver o resultado na hora, o foda que não ta centralizando o menu

mas isso é susse para resolver, mas tem várias formas para corrigir, dai vai depender de como vc vai querer.

[italogabriel 0]

mas isso é susse para resolver, mas tem várias formas para corrigir, dai vai depender de como vc vai querer.

como assim do jeito que eu vou querer? quero que ele fique centralizado sem bugs '-', zcommand se tiver skype me passa por mp ou por aqui mesmo, tenho uma proposta.

[zcommand 7]

é q eu estou no serviço agora ai não tenho acesso a algumas paradas tipo face, skype etc..., mas se eu poder te ajudar por aqui.

um exemplo de como vc pode fazer, só para vc ter uma ideia beleza, vc pode criar uma outra div antes da MENU exemp. CAMP-MENU, onde vc vai colocar a largura de de 100%, e na div menu vc colocar por exemplo 960px de largura como margin 0 auto assim a div vai se ajustar no meio do camp-menu, manja?

[italogabriel 0]

é q eu estou no serviço agora ai não tenho acesso a algumas paradas tipo face, skype etc..., mas se eu poder te ajudar por aqui.

um exemplo de como vc pode fazer, só para vc ter uma ideia beleza, vc pode criar uma outra div antes da MENU exemp. CAMP-MENU, onde vc vai colocar a largura de de 100%, e na div menu vc colocar por exemplo 960px de largura como margin 0 auto assim a div vai se ajustar no meio do camp-menu, manja?

como não pensei nisso? eaheauae você é foda vei!!

 

----

edit

 

fiz o seguinte,

 

 

 

CSS

#CAMP-MENU {width:100%; float:left; background:#2a2b2e; margin:0 auto;}

#menu {width:960px; height:34px;}
 
#menu ul {list-style:none; margin-left:auto; margin-right:auto; position:relative;}
 
#menu ul li {float:left;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:13px;}
 
#menu ul li a {text-decoration:none; color:#e6e6e6; display: block; padding:0px 15px;}
 
#menu ul li a:hover {color:#FFF;}
#menu ul li:hover {color:#ccc;}
 
#menu li span{display:none; position:absolute; top:18px; left:0; width:100%; background:#333; padding: 10px 0;}
 
#menu li:hover span{display:block;}
#menu li span a {
display: inline;
color:#ccc;
}
#menu li span a:hover {
text-decoration: underline;
}

HTML

<div id="CAMP-MENU">       
<div id="menu">
       <ul>
        <li><a href="#">LOOKBOOK</a>
          
             <span>
             <a href="#">Inverno</a>
             <a href="#">Verão</a>
             </span>
           
        </li>
        <li><a href="#">EDITORIAIS</a>
          <span>
             <a href="#">Inverno</a>
             <a href="#">Verão</a>
             <a href="#">Outono</a>
         </span>
        
        </li>
        <li><a href="#">CATÁLOGOS</a></li>
        <li><a href="#">CAMPANHAS</a></li>
        <li><a href="#">LOJAS</a></li>
        <li><a href="#">SOBRE ALEGALE</a></li>
        <li><a href="#">CONTATO</a></li>    
       </ul> 
     </div>
</div><!--FIM DA DIV MENU --> 

e não centralizou, ficou assim

http://www.imagemhost.net/vH.jpg

[zcommand 7]

vc inverteu o margin. ela tem q ficar no menu, tipo:

#CAMP-MENU {width:100%; background:#2a2b2e;}

#menu {width:960px; height:34px; margin:0 auto;}