Submenu bugado

italogabriel · Outubro 3, 2013

Olá galerinha! venho aqui pedir uma ajuda :s, quebrei a cabeça e não consegui kk, seguinte...

eu estou fazendo umas mudanças no visual do website e consegui mudar algumas coisas ao meu gosto, agora me surgiu um bug que eu não consigo resolver, vejam um print abaixo

Gostaria de deixar esse submenu no estilo do menu principal, em 100% só que não estou conseguindo :/, se puderem me ajudar agradeço *-*, abaixo segue o código

HTML

<div id="camp-menu">       <div id="menu">       <ul>        <li><a href="index.php">HOME</a></li>        <li><a href="#">LOOKBOOK</a>             <span>             <a href="?p=galeria&act=inverno">Inverno 2013</a>             <a href="?p=galeria&act=verao">Verão 2013</a>             <a href="?p=galeria&act=primavera/verao">Primavera/Verão 2014</a>             <a href="?p=galeria&act=conceito/primavera/verao">Conceito - Primavera/Verão 2014</a>             </span>            </li>        <li><a href="?p=mapa">COMO CHEGAR</a></li>        <li><a href="?p=sobre">SOBRE ALEGALE</a></li>        <li><a href="?p=contato">CONTATO</a></li>           </ul>      </div></div><!--FIM DA DIV MENU -->

CSS

/* ------------------------------TOPO E MENU CSS------------------------------ */#topo {width:100%; height:125px; background:#231f20;}#logo {background:url(images/logo.jpg); position:relative; margin:0 auto; width:137px; height:120px;}#camp-menu{width:100%; height:38px; background:#2a2b2e;} #menu {width:500px; margin:0 auto; } #menu ul {list-style:none; width:500px; margin:0 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:10px 15px;} #menu ul li a:hover {color:#FFF;}#menu ul li:hover {color:#ccc;}#menu li span{width:100%; top:38px; padding:10px; background:#666; left:0;display:none; position:absolute; z-index:99;} #menu li:hover span{display:block;}#menu li span a {display: inline;color:#ccc; padding:0px 15px; border-right-style: dotted; border-right-width:thin; border-right-color:#999;}#menu li span a:hover {text-decoration: underline;}

Ninguém?

Henrique Werlang · Outubro 3, 2013

O menu esta em 500px, então o submenu também vai estar, adicione o width tamanho da pagina ex: 980px e ajuste ao layout com margin-left ou left...

italogabriel · Outubro 3, 2013

O menu esta em 500px, então o submenu também vai estar, adicione o width tamanho da pagina ex: 980px e ajuste ao layout com margin-left ou left...

sem querer te incomodar irmãozinho, só que agora ficou assim

CÓDIGO CSS

/* ------------------------------
TOPO E MENU CSS
------------------------------ */
#topo {width:100%; height:125px; background:#231f20;}

#logo {background:url(images/logo.jpg); position:relative; margin:0 auto; width:137px; height:120px;}

#camp-menu{width:100%; height:38px; background:#2a2b2e;}
 
#menu {width:980px; margin:0 auto; }
 
#menu ul {list-style:none; width:500px; margin:0 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:10px 15px;}
 
#menu ul li a:hover {color:#FFF;}
#menu ul li:hover {color:#ccc;}

#menu li span{width:980px; top:38px; padding:10px; background:#666; left:0; display:none; position:absolute; z-index:99;}
 
#menu li:hover span{display:block;}

#menu li span a {display: inline;color:#ccc; padding:0px 15px; border-right-style: dotted; border-right-width:thin; border-right-color:#999;}

#menu li span a:hover {text-decoration: underline;}

Henrique Werlang · Outubro 3, 2013

coloca um margin left negativo no submenu até chegar no exato.

Se você quer por full igual ao menu de cima poe o width 100%.

italogabriel · Outubro 3, 2013

coloca um margin left negativo no submenu até chegar no exato.

Se você quer por full igual ao menu de cima poe o width 100%.

Só não ficou em 100% se tiver algum jeito de deixar e se não for tomar seu tempo gostaria saber se existe algum jeito...

CÓDIGO CSS

/* ------------------------------
TOPO E MENU CSS
------------------------------ */
#topo {width:100%; height:125px; background:#231f20;}

#logo {background:url(images/logo.jpg); position:relative; margin:0 auto; width:137px; height:120px;}

#camp-menu{width:100%; height:38px; background:#2a2b2e;}
 
#menu {width:500px; margin:0 auto; }
 
#menu ul {list-style none; width:980px; margin:0 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:10px 15px;}
 
#menu ul li a:hover {color:#FFF;}
#menu ul li:hover {color:#ccc;}

#menu li span{width:100%; margin-left:-250px; top:38px; padding:10px; background:#666; left:0; display:none; position:absolute; z-index:99;}
 
#menu li:hover span{display:block;}

#menu li span a {display: inline;color:#ccc; padding:0px 15px; border-right-style: dotted; border-right-width:thin; border-right-color:#999;}

#menu li span a:hover {text-decoration: underline;}

Henrique Werlang · Outubro 3, 2013

Substitui span por ul, tipo menu ul li ul.

italogabriel · Outubro 3, 2013

Substitui span por ul, tipo menu ul li ul.

acho que n vai dar certo pq o span ta configurando com os padrões que vão dar as coordenadas ao submenu, o ul não possui estas coordenadas

Henrique Werlang · Outubro 3, 2013

o correto é usar ul

<menu>

<ul>

<ul>

<li><a>submenu</a></li>

</ul>

</li>

</ul>

</menu>

span é mais para texto

italogabriel · Outubro 3, 2013

CÓDIGO HTML

<div id="camp-menu">       
<div id="menu">
       <ul>
        <li><a href="index.php">HOME</a></li>
        <ul>
        <li><a href="#">LOOKBOOK</a></li>
             <a href="?p=galeria&act=inverno">Inverno 2013</a>
             <a href="?p=galeria&act=verao">Verão 2013</a>
             <a href="?p=galeria&act=primavera/verao">Primavera/Verão 2014</a>
             <a href="?p=galeria&act=conceito/primavera/verao">Conceito - Primavera/Verão 2014</a>
             </ul>          
        </li>
        <li><A HREF="#" onClick="alert('Essa página ainda se encontra em construção! Aguarde...')">MÍDIA</A></li>
        <li><a href="?p=mapa">COMO CHEGAR</a></li>       
        <li><a href="?p=sobre">SOBRE ALEGALE</a></li>
        <li><a href="?p=contato">CONTATO</a></li>    
       </ul> 
     </div>
</div><!--FIM DA DIV MENU -->

não sei se to fazendo certo, não está funcionando.

Henrique Werlang · Outubro 4, 2013

<div id="camp-menu"> <div id="menu"> <ul> <li><a href="index.php">HOME</a></li> <li><a href="#">LOOKBOOK</a> <ul> <a href="?p=galeria&act=inverno">Inverno 2013</a> <a href="?p=galeria&act=verao">Verão 2013</a> <a href="?p=galeria&act=primavera/verao">Primavera/Verão 2014</a> <a href="?p=galeria&act=conceito/primavera/verao">Conceito - Primavera/Verão 2014</a> </ul> </li> <li><A HREF="#" onClick="alert('Essa página ainda se encontra em construção! Aguarde...')">MÍDIA</A></li> <li><a href="?p=mapa">COMO CHEGAR</a></li> <li><a href="?p=sobre">SOBRE ALEGALE</a></li> <li><a href="?p=contato">CONTATO</a></li> </ul> </div> </div>

italogabriel · Outubro 4, 2013

<div id="camp-menu"> <div id="menu"> <ul> <li><a href="index.php">HOME</a></li>  <li><a href="#">LOOKBOOK</a> <ul> <a href="?p=galeria&act=inverno">Inverno 2013</a> <a href="?p=galeria&act=verao">Verão 2013</a> <a href="?p=galeria&act=primavera/verao">Primavera/Verão 2014</a> <a href="?p=galeria&act=conceito/primavera/verao">Conceito - Primavera/Verão 2014</a> </ul> </li>  <li><A HREF="#" onClick="alert('Essa página ainda se encontra em construção! Aguarde...')">MÍDIA</A></li> <li><a href="?p=mapa">COMO CHEGAR</a></li> <li><a href="?p=sobre">SOBRE ALEGALE</a></li> <li><a href="?p=contato">CONTATO</a></li> </ul> </div> </div><!--FIM DA DIV MENU -->

editei e agr ta tudo certo, agr só ficou bugado o menu pq tem que alterar a ordem do css, como ficaria a ordem?

o meu ficou assim,

CSS

/* ------------------------------
TOPO E MENU CSS
------------------------------ */
#topo {width:100%; height:125px; background:#231f20;}

#logo {background:url(images/logo.jpg); position:relative; margin:0 auto; width:137px; height:120px;}

#camp-menu{width:100%; height:38px; background:#2a2b2e;}
 
#menu {width:500px; margin:0 auto; }
 
#menu ul {list-style none; width:980px; margin:0 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:10px 15px;}
 
#menu ul li a:hover {color:#FFF;}
#menu ul li:hover {color:#5B2E00;}

#menu li ul{width:100%; margin-left:-250px; top:38px; padding:10px; background:#666; left:0; display:none; position:absolute; z-index:99;}
 
#menu li:hover span{display:block;}

#menu li ul a {display: inline; color:#ccc; padding:0px 15px; border-right-style: dotted; border-right-width:thin; border-right-color:#999;}

#menu li ul a:hover {text-decoration: underline;}

só que o submenu parou de funcionar

Henrique Werlang · Outubro 4, 2013

Como que ficou ?

italogabriel · Outubro 4, 2013

Como que ficou ?

não aparece o submenu quando eu passo o mouse :s

Henrique Werlang · Outubro 5, 2013

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

troque o span por ul

italogabriel · Outubro 5, 2013

troque o span por ul

você e foda man! só não ficou em 100% ainda, só que melhorou bastante ;), não entendo porque não está em 100% ainda o.O

Só peço que revise meu código e se possível aponte aonde +- irá deixar em 100%! você está sendo de grande ajuda irmãozinho!

CSS

/* ------------------------------
TOPO E MENU CSS
------------------------------ */
#topo {width:100%; height:125px; background:#231f20;}

#logo {background:url(images/logo.jpg); position:relative; margin:0 auto; width:137px; height:120px;}

#camp-menu{width:100%; height:38px; background:#2a2b2e;}
 
#menu {width:500px; margin:0 auto; }
 
#menu ul {list-style none; width:980px; margin:0 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:10px 15px;}
 
#menu ul li a:hover {color:#FFF;}
#menu ul li:hover {color:#5B2E00;}

#menu li ul{width:100%; margin-left:-250px; top:38px; padding:10px; background:#666; left:0; display:none; position:absolute; z-index:99;}
 
#menu li:hover ul{display:block;}

#menu li ul a {display: inline; color:#ccc; padding:0px 15px; border-right-style: dotted; border-right-width:thin; border-right-color:#999;}

#menu li ul a:hover {text-decoration: underline;}

am designer · Outubro 6, 2013

Salve mano!

Cara fiz um code aqui e parede que deu certo, veja se é isso o que quer...só que assim, o certo é mesmo trocar o span por ul, só que quando você faz isso li:hover, o bendito IE não reconhece o hover para li. Mas vc deve achar algum script js para resolver isso ai no google, tinha um aqui mas não sei onde esta. kkkk

Bom, ai esta o CSS:

*{margin: 0; padding: 0;}
/* ------------------------------
TOPO E MENU CSS
------------------------------ */
#topo {width:100%; height:125px; background:#231f20;}

#logo {background:url(images/logo.jpg); position:relative; margin:0 auto; width:137px; height:120px;}

#camp-menu{width:100%; height:38px; background:#2a2b2e;}
 
#menu {width:500px; margin:0 auto; }
 
#menu ul {list-style:none; width:500px; margin:0 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:10px 15px;}
 
#menu ul li a:hover {color:#FFF;}
#menu ul li:hover {color:#ccc;}

#menu li ul{
  width:1000px;
  top:38px;
  position: absolute;
  padding: 10 3000px;
  margin: 0 -3000px; 
  z-index: 101;
  display: none;
  background: #666;
}
#menu li:hover ul{display:block;}

#menu li ul li a {display: inline;color:#ccc; padding:0px 15px; border-right-style: dotted; border-right-width:thin; border-right-color:#999;}

#menu li ul li a:hover {text-decoration: underline;}

E o HTML (ja com a troca de <span> por <ul>)

<div id="camp-menu">       
<div id="menu">
       <ul>
        <li><a href="index.php">HOME</a></li>
        <li><a href="#">LOOKBOOK</a>
             <ul>
             <li><a href="?p=galeria&act=inverno">Inverno 2013</a></li>
             <li><a href="?p=galeria&act=verao">Verão 2013</a></li>
             <li><a href="?p=galeria&act=primavera/verao">Primavera/Verão 2014</a></li>
             <li><a href="?p=galeria&act=conceito/primavera/verao">Conceito - Primavera/Verão 2014</a></li>
             </ul>    
        </li>
        <li><a href="?p=mapa">COMO CHEGAR</a></li>
        <li><a href="?p=sobre">SOBRE ALEGALE</a></li>
        <li><a href="?p=contato">CONTATO</a></li>    
       </ul> 
     </div>
</div><!--FIM DA DIV MENU -->  
    </ul>

Espero ter ajudado!

italogabriel · Outubro 6, 2013

Salve mano!

Cara fiz um code aqui e parede que deu certo, veja se é isso o que quer...só que assim, o certo é mesmo trocar o span por ul, só que quando você faz isso li:hover, o bendito IE não reconhece o hover para li. Mas vc deve achar algum script js para resolver isso ai no google, tinha um aqui mas não sei onde esta. kkkk

Bom, ai esta o CSS:

*{margin: 0; padding: 0;}
/* ------------------------------
TOPO E MENU CSS
------------------------------ */
#topo {width:100%; height:125px; background:#231f20;}

#logo {background:url(images/logo.jpg); position:relative; margin:0 auto; width:137px; height:120px;}

#camp-menu{width:100%; height:38px; background:#2a2b2e;}
 
#menu {width:500px; margin:0 auto; }
 
#menu ul {list-style:none; width:500px; margin:0 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:10px 15px;}
 
#menu ul li a:hover {color:#FFF;}
#menu ul li:hover {color:#ccc;}

#menu li ul{
  width:1000px;
  top:38px;
  position: absolute;
  padding: 10 3000px;
  margin: 0 -3000px; 
  z-index: 101;
  display: none;
  background: #666;
}
#menu li:hover ul{display:block;}

#menu li ul li a {display: inline;color:#ccc; padding:0px 15px; border-right-style: dotted; border-right-width:thin; border-right-color:#999;}

#menu li ul li a:hover {text-decoration: underline;}

E o HTML (ja com a troca de <span> por <ul>)

<div id="camp-menu">       
<div id="menu">
       <ul>
        <li><a href="index.php">HOME</a></li>
        <li><a href="#">LOOKBOOK</a>
             <ul>
             <li><a href="?p=galeria&act=inverno">Inverno 2013</a></li>
             <li><a href="?p=galeria&act=verao">Verão 2013</a></li>
             <li><a href="?p=galeria&act=primavera/verao">Primavera/Verão 2014</a></li>
             <li><a href="?p=galeria&act=conceito/primavera/verao">Conceito - Primavera/Verão 2014</a></li>
             </ul>    
        </li>
        <li><a href="?p=mapa">COMO CHEGAR</a></li>
        <li><a href="?p=sobre">SOBRE ALEGALE</a></li>
        <li><a href="?p=contato">CONTATO</a></li>    
       </ul> 
     </div>
</div><!--FIM DA DIV MENU -->  
    </ul>

Espero ter ajudado!

Olá irmãozinho! obrigado por se prontificar ao me ajudar! seguinte, inseri o código aqui e não está funcionando o submenu! eu passo o mouse na categoria LOOKBOOK e o submenu não aparece :s

am designer · Outubro 6, 2013

Estranho em mano!

Aqui ta funcionando. Pode ser algo no resto do codigo, faz assim. Pega o codigo abaixo, salve num arquivo separado (exemplo.html) e abra no navegador.

<html>
<head>
    <title>Menu</title>

<style type="text/css">
/* ------------------------------
TOPO E MENU CSS
------------------------------ */
*{margin: 0; padding: 0;}
/* ------------------------------
TOPO E MENU CSS
------------------------------ */
#topo {width:100%; height:125px; background:#231f20;}

#logo {background:url(images/logo.jpg); position:relative; margin:0 auto; width:137px; height:120px;}

#camp-menu{width:100%; height:38px; background:#2a2b2e;}
 
#menu {width:500px; margin:0 auto; }
 
#menu ul {list-style:none; width:500px; margin:0 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:10px 15px;}
 
#menu ul li a:hover {color:#FFF;}
#menu ul li:hover {color:#ccc;}

#menu li ul{
  width:1000px;
  top:38px;
  position: absolute;
  padding: 10 3000px; 
  margin: 0 -3000px; 
  z-index: 101;
  display: none;
  background: #666;
}
#menu li:hover ul{display:block;}

#menu li ul li a {display: inline;color:#ccc; padding:0px 15px; border-right-style: dotted; border-right-width:thin; border-right-color:#999;}

#menu li ul li a:hover {text-decoration: underline;}

</style>
</head>
<body>
<div id="camp-menu">       
<div id="menu">
       <ul>
        <li><a href="index.php">HOME</a></li>
        <li><a href="#">LOOKBOOK</a>
             <ul>
             <li><a href="?p=galeria&act=inverno">Inverno 2013</a></li>
             <li><a href="?p=galeria&act=verao">Verão 2013</a></li>
             <li><a href="?p=galeria&act=primavera/verao">Primavera/Verão 2014</a></li>
             <li><a href="?p=galeria&act=conceito/primavera/verao">Conceito - Primavera/Verão 2014</a></li>
             </ul>    
        </li>
        <li><a href="?p=mapa">COMO CHEGAR</a></li>
        <li><a href="?p=sobre">SOBRE ALEGALE</a></li>
        <li><a href="?p=contato">CONTATO</a></li>    
       </ul> 
     </div>
</div><!--FIM DA DIV MENU -->  
    </ul> 
</body>
</html>

Caso dê certo é o que eu te disse, tem que ver ai no seu codigo se tem alguma coisa interferindo. Pode ser até esse #topo

italogabriel · Outubro 6, 2013

Realmente funcionou! Muito obrigado!! será que é esse #topo?

am designer · Outubro 6, 2013

Por nada mano!

Sei não heim mano, tenta trocar o html que te mandei, por este aqui

    <div id="camp-menu">       
    <div id="menu">
           <ul>
            <li><a href="index.php">HOME</a></li>
            <li><a href="#">LOOKBOOK</a>
                 <ul>
                 <li><a href="?p=galeria&act=inverno">Inverno 2013</a></li>
                 <li><a href="?p=galeria&act=verao">Verão 2013</a></li>
                 <li><a href="?p=galeria&act=primavera/verao">Primavera/Verão 2014</a></li>
                 <li><a href="?p=galeria&act=conceito/primavera/verao">Conceito - Primavera/Verão 2014</a></li>
                 </ul>    
            </li>
            <li><a href="?p=mapa">COMO CHEGAR</a></li>
            <li><a href="?p=sobre">SOBRE ALEGALE</a></li>
            <li><a href="?p=contato">CONTATO</a></li>    
           </ul> 
    </div>
    </div><!--FIM DA DIV MENU -->

Arquivado

Submenu bugado

Recommended Posts

italogabriel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Werlang 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

italogabriel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Werlang 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

italogabriel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Werlang 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

italogabriel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Werlang 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

italogabriel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Werlang 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

italogabriel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Werlang 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

italogabriel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Werlang 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

italogabriel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

am designer 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

italogabriel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

am designer 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

italogabriel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

am designer 7