Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

leandrohb

problema com menu css

Por , em Desenvolvimento frontend

Recommended Posts

leandrohb    0

leandrohb
Postado

olá não estou consiguindo fazer o sub-menu acompanhar o menu de qual ele pertence alguem poderia me ajuda tranks...

 

errs.jpg

http://img844.imageshack.us/i/errs.jpg

 

HTML

 

<div id="menu">
	<ul>
        <li><a href="#">Home</a>
	 <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Equipe</a></li>
        <li><a href="#">Contatos</a></li>
	 </ul></li>
        <li><a href="#">Equipe</a>
	 		 <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Equipe</a></li>
        <li><a href="#">Contatos</a></li>
	 </ul></
	 </li>
        <li><a href="#">Contatos</a>
        </li>
   </ul>
	</div>

 

CSS

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

#menu li{
width:100px;
float:left;
}

#menu li a{
margin-top:2px;
display:block;
float:left;
padding:0px 15px;
height:25px;
line-height:25px;
text-decoration:none;
color:#333;
border:none;
}

#menu li a:hover{
margin-top:2px;
background-image:url(images/menu_sidebar_botton.jpg);
}

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

#menu li ul{
margin:0 auto;
display:none;
float:left;
position:absolute;
top:25px;
left:0;
width:150px;
background:#333;
}
#menu li ul a{
margin-top:1px;
display:block;
float:left;
padding:0px 30px;
height:25px;
line-height:25px;
text-decoration:none;
color:#00FF00;
border:none;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jack IN The B0x    0

Jack IN The B0x
Postado

mano, sua estrutura ta meio bagunçada.

 

arrumei assim pra você

 

<style type="text/css">
#menu ul{
       list-style:none;
       margin:0 auto;
       position:relative;
       }

#menu li{
       width:100px;
       float:left;
}

#menu li a{
       margin-top:2px;
       display:block;
       float:left;
       padding:0px 15px;
       height:25px;
       line-height:25px;
       text-decoration:none;
       color:#333;
       border:none;
}

#menu li a:hover{
       margin-top:2px;
       }

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

#menu li ul{
margin:0 auto;
padding-left:0px;
display:none;
float:left;
position:absolute;
top:25px;
left:0;
width:110px;
background: #F00;
text-align:center;
}
#menu li ul a{
       margin-top:1px;
       display:block;
       float:left;
       padding:0px 30px;
       height:25px;
       line-height:25px;
       text-decoration:none;
       color: #0F0;
       border:none;
}
</style>
</head>

<body>
<div id="menu">
<ul>
     <li><a href="#">Home</a>
     	 <ul>
    		 <li><a href="#">Home</a></li>
    		 <li><a href="#">Equipe</a></li>
    		 <li><a href="#">Contatos</a></li>
        </ul>
     </li>
     <li><a href="#">Equipe</a></li>
     <li><a href="#">Contatos</a></li>

</ul>
               </div>

 

qlquer duvida ve esse video aki

 

 

http://www.mxmasters.com.br/tableless-css/tableless-menu-dropdownsubmenu/

Compartilhar este post

Link para o post
Compartilhar em outros sites

leandrohb    0

leandrohb
Postado

obg pela ajuda segui o exemplo da video so que continua com alguns problemas mais to arrumando aki t+ qualquer duvida posto aqui...

Compartilhar este post

Link para o post
Compartilhar em outros sites

_Leandro_    0

_Leandro_
Postado

Opa blza... dei uma enxugada no teu código...

 

HTML

<ul id="menu">
	<li><a href="#">Home</a>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Equipe</a></li>
			<li><a href="#">Contatos</a></li>
		</ul>
	</li>
	<li><a href="#">Equipe</a></li>
	<li><a href="#">Contatos</a>
		<ul>
			<li><a href="#">Equipe</a></li>
			<li><a href="#">Contatos</a></li>
		</ul>
	</li> 
</ul>

 

CSS:

<style type="text/css">
#menu{list-style:none;margin:0 auto;}
#menu li{float:left;list-style:none;width:100px;}
#menu li a{display:block;padding:0px 15px;height:25px;line-height:25px;text-decoration:none;color:#555;}
#menu li a:hover{color:#000;}
#menu li:hover ul{display:block;}
#menu li ul{padding-left:0px;display:none;}
#menu li ul li{background:#F00;width:120px;}
#menu li ul li a{display:block;padding:0px 30px;height:25px;line-height:25px;text-decoration:none;color:#0F0;}
</style>

 

Testei aqui e funcionou blza.

 

Te aconselho a dar uma olhada nas propriedades position:absolute; e position:relative;

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito