Ir para conteúdo

POWERED BY:

Arquivado

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

Biano

menu - horizontal com sub menu vertical

Por , em Desenvolvimento frontend

Recommended Posts

Biano    0

Biano
Postado

Boa tarde,

 

Semana passada recebi ajuda pra fazer esse menu mas nao detalhei uma parte importante o conteudo deste menu é dinamico.

E como estamos trabalhando com (relative)ao alterar o width pra auto perco o efeito.

 

Por favor qual a melhor maneira de modificar este codigo de maneira que o efeito nao seja perdido?

 

Obs: adiciionei um comentario como dinamico nos lugares onde supostamente os tamanhos nao podem ser fixados.

 

 

Segue o codigo:

<!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">
#filtros ul {
list-style:none;
margin:0;
padding:0;
}

#filtros ul li {
/*position: relative;*/
float:left;
width:100px; /* Dinamico */
height:20px;
border:1px solid #FFF;
background-color:#336699;
color:#FFF;
}

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

#filtros ul li a {
float:left;
position:relative;
width:100px; /* Dinamico */
height:20px;
border:1px solid #FFF;
background-color:#336699;
color:#FFF;
text-decoration:none;
font-family:arial;
}

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

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

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


</style>
</head>

<body>
<div id="filtros">
<ul>
<li><a href="#">Painel</a>
<ul>
<div id="#">
<li><a href="#">Quem somos</a></li>
<li><a href="#">Nossa Missao</a></li>
</div>
</ul>
</li>
<li><a href="#">Home</a>
<li><a href="#">Opções</a></li>
<li><a href="#">Alterar Senha</a></li>
<li><a href="#">Fale Conosco</a></li>
<li><a href="#">Cliente</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Filhos</a></li>
</ul>
</div>
</body>
</html>

 

 

Agradeço atenção!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biano    0

Biano
Postado

Retire a propriedade width...

 

 

Cara removi o width de ambas e mesmo assim nao funcionou....

 

nao sei bem se voce entendeu o que pretendo fazer.

 

Nao posso usar o width com valor fixo pois vai ter variações pois o texto é dinamico.

Ja tentei usar o valor auto e da erro, removi o width como voce sugeriu e o erro persiste.

 

Qual o segredo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Tem um esquemático aí do que você planeja?

Tire um print screen também do que está acontecendo com o código atual...

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