Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal,
Estou com uma dificuldade para desenvolver o menu drop down.
Alguem poderia dar uma luz ai?!
Segue a pagina para exemplo: Clique aqui
>
<div id="menu">
<ul id="nav">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">v</a>
<ul>
<li><a href="#">subitem1</a></li>
<li><a href="#">subitem2</a></li>
<li><a href="#">subitem3</a></li>
</ul>
</li>
</ul>
</div><!-- FIM DA DIV MENU -->Voce vai precisar utilizar CSS e dá uma lida nisso:
http://forum.imaster...menu-drop-down/
................
Corn flakes ... beleza
Seguinte ... a lista eu criei la da forma que me passou, segue link atualizado: Clique aqui
Agora vem a questão do CSS incluindo tb a <ul id="nav">.
Porque este topico q me passou como exemplo está um pouco quebrado.
Fico no aguardo.
Patrick cuidado para nao fechar um bloco no lugar errado.
O menu Itens tem seus submenus, logo voce só fechará o bloco após ter colocado todos os sub-itens.Beleza.
Fica assim:
<div id="menu">
<ul id="nav">
<li class="current_page_item"><a href="#" class="first">Homepage</a></li>
<li><a href="#">Itens</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>Fiz uns testes aqui e acho que resolvi. Ve ae :
<style type="text/css">
#menu {padding:10px;}
#menu a {text-decoration:none;}
ul li {list-style:none;}
#nav li {float:left; position:relative; width:120px;}
li ul {width:30px;}
#nav li:hover li {margin:0 -40px;}
li li :hover{color:red;background:gold;}
#nav li li{ position:relative;margin:-100px;}
</style>
</head>
<body>
<div id="menu">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Itens</a>
<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>
</li>
<li><a href="#">Contato</a></li>
</ul>
</div>>
Patrick cuidado para nao fechar um bloco no lugar errado.
O menu Itens tem seus submenus, logo voce só fechará o bloco após ter colocado todos os sub-itens.Beleza.
Fica assim:
<div id="menu">
<ul id="nav">
<li class="current_page_item"><a href="#" class="first">Homepage</a></li>
<li><a href="#">Itens</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>Fiz uns testes aqui e acho que resolvi. Ve ae :
<style type="text/css">
#menu {padding:10px;}
#menu a {text-decoration:none;}
ul li {list-style:none;}
#nav li {float:left; position:relative; width:120px;}
li ul {width:30px;}
#nav li:hover li {margin:0 -40px;}
li li :hover{color:red;background:gold;}
#nav li li{ position:relative;margin:-100px;}
</style>
</head>
<body>
<div id="menu">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Itens</a>
<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>
</li>
<li><a href="#">Contato</a></li>
</ul>
</div>.........
Corn flakes ...
De uma olhada la na pagina como ficou ...
O menu está meio desconfigurado ...
Pagina atualizada: http://www.mundolivr...oo.com.br/page/
Fico no aguardo
Patrick
Não utilize 'position' para este propósito.
Leia.
>
Não utilize 'position' para este propósito.
Leia.
Evandro Oliveira,
Então terei que tirar os "positions"?!
Aguardo
É a primeira coisa a se fazer.
Depois de ler o link que recomendei, verá que os 4º e 5º menus são dois exemplos, ainda que visualmente simples, complexos de se montar em CSS. Estude a estrutura e a forma com que foram projetados.
Aplicando as correções que o Evandro frisou você deve agora
definir o seu CSS de acordo com o que você precisa aí, especificamente
as seguintes linhas:
/ posicão do menu quando o mouse estiver em cima do menu Itens /
#nav li:hover li {margin:0 -40px;}
/ posicão do menu quando o mouse não estiver em cima do menu Itens /
#nav li li{ margin:-100px;}
//
Onde você define as medidas quando o mouse em foco e fora de foco respectivamente.
Voce vai precisar utilizar CSS e dá uma lida nisso:
http://forum.imaster...menu-drop-down/