[Resolvido] menu - horizontal com sub menu vertical

Biano · Outubro 31, 2011

Boa tarde,

Perdi a manha desta segunda feira tentando fazer um simples hover neste menu, pretendo dar o efeito inverso quando o visitante passar o mouse.

Qual o segredo?

O que tem de errado com meu codigo?

Segue o codigo:

<style>

#menu a{

text-decoration:none;

font-family:arial;

color:#FFF;

}

#menu ul {

list-style:none;

margin:0;

padding:0;

}

#menu li ul{

display:none;

}

#menu ul li{

float:left;

position:relative;

width:200px;

height:20px;

border:1px solid #FFF;

background-color:#333;

color:#FFF;

}

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

#menu ul li:hover ul{display:block; margin-top:-1px; background-color:#000; color:#FFF;}

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

#menu ul li:hover ul li:hover ul{

display:block;

position: absolute;

left:120px;

top:0;

margin-top:0;

}

</style>

</head>

<body>

<ul>

<ul>

<li><a href="#">Quem somos</a></li>

<li><a href="#">Nossa Missao</a></li>

</ul>

</li>

<li><a href="#">ServiÇos</a>

<ul>

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

<li><a href="#">ManutenÇao</a></li>

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

</ul>

</li>

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

</ul>

</div>

</body>

</html>

Obrigado pela atenção,

Luiz Fernando - Ampol · Outubro 31, 2011

Bom acho que é isso que voce quer:

Ponha isso no seu CSS:

<style>
#menu a{
text-decoration:none;
font-family:arial;
color:#FFF;
}
#menu ul {
list-style:none;
margin:0;
padding:0;
}
#menu li ul{
display:none;
}
#menu ul li{
float:left;
position:relative;
width:200px;
height:20px;
border:1px solid #FFF;
background-color:#333;
color:#FFF;
}
#menu ul li a:hover{
color:#333;
background-color:#FFF
}

#menu ul li:hover ul{
display:block;
margin-top:-1px;
background-color:#000;
color:#FFF;
}

#menu ul li:hover ul li:hover ul{
display:block;
position: absolute;
left:120px;
top:0;
margin-top:0;
}

</style>

Qualquer coisa poste aqui

Abraços

Biano · Outubro 31, 2011

Cara referente sua ajuda, esta ocorrendo o mesmo erro que esta sendo apresentado da maneira errada.

O efeito esta sendo realizado da maneira errada esta praticamente da mesma forma que eu fiz aqui.

O efetio hover esta sendo executado pela metade, mesmo informando o tamanho real.

Por isso postei aqui no forum....

nao estou conseguindo resolver.

AGRADEÇO SUA ATENÇÃO.

/* SEGUE O CODIGO FONTE ATUAL - COM SUA AJUDA */

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Documento sem título</title>

<style>

#menu a{

text-decoration:none;

font-family:arial;

color:#FFF;

}

#menu ul {

list-style:none;

margin:0;

padding:0;

}

#menu li ul{

display:none;

}

#menu ul li{

float:left;

position:relative;

width:200px;

height:20px;

border:1px solid #FFF;

background-color:#333;

color:#FFF;

}

#menu ul li a:hover{

color:#333;

background-color:#FFF

}

#menu ul li:hover ul{

display:block;

margin-top:-1px;

background-color:#000;

color:#FFF;

}

#menu ul li:hover ul li:hover ul{

display:block;

position: absolute;

left:120px;

top:0;

margin-top:0;

}

</style>

</head>

<body>

<ul>

<ul>

<li><a href="#">Quem somos</a></li>

<li><a href="#">Nossa Missao</a></li>

</ul>

</li>

<li><a href="#">ServiÇos</a>

<ul>

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

<li><a href="#">ManutenÇao</a></li>

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

</ul>

</li>

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

</ul>

</div>

</body>

</html>

Bom acho que é isso que voce quer:

Ponha isso no seu CSS:

<style>
#menu a{
text-decoration:none;
font-family:arial;
color:#FFF;
}
#menu ul {
list-style:none;
margin:0;
padding:0;
}
#menu li ul{
display:none;
}
#menu ul li{
float:left;
position:relative;
width:200px;
height:20px;
border:1px solid #FFF;
background-color:#333;
color:#FFF;
}
#menu ul li a:hover{
color:#333;
background-color:#FFF
}

#menu ul li:hover ul{
display:block;
margin-top:-1px;
background-color:#000;
color:#FFF;
}

#menu ul li:hover ul li:hover ul{
display:block;
position: absolute;
left:120px;
top:0;
margin-top:0;
}

</style>

Qualquer coisa poste aqui

Abraços

Luiz Fernando - Ampol · Outubro 31, 2011

Ahh entendi...

Faça assim então!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu CSS</title>
<style type="text/css">
ul {
list-style:none;
margin:0;
padding:0;
}

ul li {
position: relative;
float:left;
width:200px;
height:20px;
border:1px solid #FFF;
background-color:#333;
color:#FFF;
}

li ul {
/*position: absolute;*/
display: none;
}

ul li a {
float:left;
position:relative;
width:200px;
height:20px;
border:1px solid #FFF;
background-color:#333;
color:#FFF;
text-decoration:none;
font-family:arial;
}

ul li a:hover {
color: #333;
background-color:#FFF;
}

/* Hack para IE MAC  - Para não bugar la =D\*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* FIM */

li:hover ul { display: block;}


</style>
</head>

<body>
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">Quem somos</a></li>
<li><a href="#">Nossa Missao</a></li>
</ul>
</li>
<li><a href="#">ServiÇos</a>
<ul>
<li><a href="#">Hospedagem</a></li>
<li><a href="#">ManutenÇao</a></li>
<li><a href="#">Websites</a></li>
<li><a href="#">Blog</a></li>
</ul>
</li>
<li><a href="#">Contato</a></li>
</ul>
</body>
</html>

Agora acho que acertei hahaha

Qualquer coisa volte a postar.

Abraços

Biano · Outubro 31, 2011

Perfeito!!!

Voce pode me explicar qual a magica e o porque?

Fiz igual o anterior que voce me enviou e gostaria de entender bem a regra, voce pode me explicar?

Entrar

Arquivado

[Resolvido] menu - horizontal com sub menu vertical

Recommended Posts

Biano 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luiz Fernando - Ampol 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Biano 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luiz Fernando - Ampol 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Biano 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante