• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

xploit

de vertical para horizontal

3 mensagens neste tópico

Boas pessoal como faço para por este menu na horizontal?

css


#Nav {
width: 100px;
padding: 0;
list-style: none;
}

#Nav li {
background: #ddd;

height: 20px;
}

.Menu {
padding: 0;		
width: 202px;
list-style: none;
display: none;	
}

.Menu li {
height: 20px;
width: 200px;	
}

HTML

<ul id="Nav">
	<li>
		menu1
		<ul class="Menu">
			<li>Sub element 1</li>
			<li>Sub element 2</li>
		</ul>
            
            <li>
		menu2
		<ul class="Menu">
			<li>Sub element 1</li>
			<li>Sub element 2</li>
		</ul>
            
            
	</li>
</ul>

Tive a tentar com float, mas fica tudo desconfigurado nao consigo mesmo chegar la, agreço as ajudas :P

Fiquem bem.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Viva xploit,

Onde tens:

#Nav li {
   background: #ddd;
   height: 20px;
}

Coloca:

#Nav li {
   background: #ddd;
   height: 20px;
   float:left;
   margin-right:10px;
}

Nota que, no teu HTML, esqueceste-te de fechar um LI. Devia estar assim:

<ul id="Nav">
   <li>menu1
      <ul class="Menu">
         <li>Sub element 1</li>
         <li>Sub element 2</li>
      </ul>
   </li>    
   <li>menu2
      <ul class="Menu">
         <li>Sub element 1</li>
         <li>Sub element 2</li>
      </ul>
   </li>
</ul>


0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Em vez do float:left, podes utilizar display:inline. Em certas ocasiões dá mais jeito.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora