menu - horizontal com sub menu vertical
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!!
Discussão (3)
Carregando comentários...