Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
olá não estou consiguindo fazer o sub-menu acompanhar o menu de qual ele pertence alguem poderia me ajuda tranks...
/applications/core/interface/imageproxy/imageproxy.php?img=http://img844.imageshack.us/img844/8752/errs.jpg&key=f280a148998f2fe97d6332830e373b124d10f6fb587c80debd8d9dbaae3016f1" alt="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;
}margin-top:1px;
display:block;
float:left;
padding:0px 30px;
height:25px;
line-height:25px;
text-decoration:none;
color:#00FF00;
border:none;
}obg pela ajuda segui o exemplo da video so que continua com alguns problemas mais to arrumando aki t+ qualquer duvida posto aqui...
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
mano, sua estrutura ta meio bagunçada.
arrumei assim pra você
<style type="text/css">
#menu ul{
#menu li{
#menu li a{
#menu li a:hover{
#menu li:hover ul{
#menu li ul{
#menu li ul a{
qlquer duvida ve esse video aki
http://www.mxmasters.com.br/tableless-css/tableless-menu-dropdownsubmenu/