Ir para conteúdo

Arquivado

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

Carcleo

Lista na vertical para menu dropdown

Por , em Desenvolvimento frontend

Recommended Posts

Carcleo    4

Carcleo
Postado

Pessoal. Boa Tarde!

 

Tenho a seguinte lista desordenada que pretendo fazer um menu drop down com ela.

Porem, gostaria que esse menu fosse na horizontal os menus principal e que o drop down fosse vertical.

O que eu tenho qu fazer?

<ul><li><a href="index.php">Home</a></li>
	<li><a href="anuncie.php">Anuncie</a></li>
	<li><a href="contato.php">Contato</a></li>
	<li><a href="lancamentos.php">Lançamentos</a></li>
	<li><a href="quemsomos.php">Quem Somos</a></li>
	<li><a href="servicos.php">Serviços</a></li>
	<li><a href="pesquisa.php">Comprar</a>
		<ul>
			<li><a href="pesquisa.php?acao=pesquisa&imovel=apartamento">Apartamento</a></li>
			<li><a href="pesquisa.php?acao=pesquisa&imovel=casa">Casa</a></li>
			<li><a href="pesquisa.php?acao=pesquisa&imovel=chacara">Chácara</a></li>
			<li><a href="pesquisa.php?acao=pesquisa&imovel=fazenda">fazenda</a></li>
			<li><a href="pesquisa.php?acao=pesquisa&imovel=kitnet">Kitnet</a></li>
			<li><a href="pesquisa.php?acao=pesquisa&imovel=sala">Sala</a></li>
			<li><a href="pesquisa.php?acao=pesquisa&imovel=sobrado">Sobrado</a></li>
			<li><a href="pesquisa.php?acao=pesquisa&imovel=sobreloja">Sobre Loja</a></li>
			<li><a href="pesquisa.php?acao=pesquisa&imovel=terreno">Terreno</a></li>
			<li><a href="pesquisa.php?acao=pesquisa&imovel=apartamento" class="endlist" >Outros</a></li>
		</ul>
	 </li>
</ul>

[/code]

A ideia é fazer um menu parecido com esse ai:

 

 

http://www.minhaprimeiracasa.com.br/

 

Inclusive a minha logo vai entrar extamente antes do menu. Igualzinho.

 

Tentei fazzer esse css mas não dá certo

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
color: #666;
background-color: #fff;
background-image:url(../../img/fundo_site.jpg); 
background-repeat:repeat-x;
margin: 0; /*AQUI, COLOCAMOS TODAS AS MARGENS(top,button, left e right) EM 0.*/
}

ul {
margin: 0; /*AQUI, COLOCAMOS TUDO QUE ESTA DENTRO DE UL COM MARGENS(TODAS) EM 0*/
padding: 0; /*AQUIN RETIRAMOS AS MARCAÇOES: AQUELES PONTINHOS ANTES DAS LINHAS*/
}

ul li ul li {
display: none; /*AQUI, TODAS AS INFORMÇOES SOMEM*/ 
}

Tentei olhar no codigo fonte dessa pagina mas toda tentativa que fiz o menu saiu na verrical e nem consegui colocar a logo antes do menu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

leonardo WD    0

leonardo WD
Postado

Po cara trabalha com div, por exemplo:

 

index.html


<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>

<body>

<div class="menu">
   <div class="opt1">Home</div>
   <div class="opt2">Menu Rollover
   <ul>
   <li>Sub-item 1</li>
   <li>Sub-item 2</li>
   </ul>
   </div>
   </div>
</body>
</html>

 

 

estilo.css

 

.menu{
  width: 700px;
  height: 30px;
  border: 1px solid #000;
}
.opt1{
  width: 100px;
  height: 30px;
  float: left;
  background: #000;
  font-family: Arial;
  font-size: 12px;
  color: #F00;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
/*Aqui é ação de quando o mouse estiver em cima do menu*/
.opt1:hover{
  background-color: #ccc;
  color: #333;
}
/*Menu com Rollover começa aqui*/
.opt2{
  width: 100px;
  height: 30px;
  float: left;
  background: #000;
  font-family: Arial;
  font-size: 12px;
  color: #F00;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.opt2:hover{
  background-color: #ccc;
  color: #333;
}
/*fazer o li não aparecer na página enquanto o mouse não estiver acima do menu */
.opt2 li{
  display: none;
}
/*Ajustar a distância do menu até a lista */
.opt2 ul {
  margin-top: 0px;
}
/*aqui vai fazer o menu Rollover aparecer */
.opt2:hover li{
  display: block;
  width: 100px;
  height: 30px;
  background: #000;
  font-family: Arial;
  font-size: 12px;
  color: #F00;
  margin: 0 0 0 -40px; /*Alinhamento do menu */

}
/*quando mouse passar em cima de algum item do menu a cor de fundo e fonte muda */
.opt2:hover li:hover{
  background-color: #ccc;
  color: #333;
}

 

Espero ter ajudado! Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

JCMais    75

JCMais
Postado

<ul> dentro de <li>: errado, sem exceção

<li> dentro de <ul>: correto

 

Incorreto.

 

LI aceita qualquer elemento de fluxo dentro dela. Veja a especificação:

<!ELEMENT LI - O (%flow;)*             -- list item -->
<!ATTLIST LI
 %attrs;                              -- %coreattrs, %i18n, %events --
 >

http://www.w3.org/TR/html4/struct/lists.html#h-10.2

 

UL é um elemento de fluxo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

tava falando disso:

<ul>
<li>Link</li>
<ul><li>Link</li>
</ul>
</ul>

 

Isso aí, se você validar, dá inválido, não?

 

:bye:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

ah, viajei no falar mesmo.. mas eu estava falando sobre menu dropdown, que direto fazem esse uso :)

 

thx!!

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