Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
subzero59

Menu simples com submenus usando css

Recommended Posts

Saudações galera!

 

to quebrando a cabeça pra fazer um menu simples que quando passe o mouse ele abra as opções, o que posso mudar nesse codigo pra que fique legal (mandei um print em anexo pra vocês verem como ta ficando)

 

Segue o codigo:

 

<html>
	<head>
		<title>Menu</title>
		<style>
			#menu{
				list-style:none;
				position:absolute;
				left:15%;
			}
			
			#menu li{
				display:inline;
				border:1px solid black;
				float:left;
				padding:10px;				
				text-align:center;
				background-color:#CCCCCC;
			}
			
			#menu li:hover{
				background-color:#EDEDED;
			}
			
			#menu li a{
				text-decoration:none;
				display:block;
				font-weight:bold;
				font-family:verdana;
			}
			
			#menu li ul{
				display:none;
			}
			
			#menu li:hover ul{
				display:block;
			}
			
		</style>
		
	</head>
	<body>		
		<ul id="menu">
			<li id="menu1"><a href="">Menu1</a>
				<ul>
					<li><a href="">opcao1</a></li>
					<li><a href="">opcao2</a></li>
					<li><a href="" >opcao3</a></li>         
				</ul>			
			</li>			
			
			<li><a href="">Menu2</a></li>
			<li><a href="" >Menu3</a></li>
			
		</ul>	
		
	</body>

</html>

 

Sem título.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

@subzero59 Basicamente tem alguns errinhos ali.

O #menu li  precisa ter a posição relativa.

O #menu li ul  precisa ter posição absoluta,  ajustar o top, left e o width dele.

 

https://jsfiddle.net/245x2480/

 

Recomendo que leia este artigo que explicar um menu dropdown em CSS de forma bem fácil de entender:

http://www.devmedia.com.br/menu-em-css-menu-dropdown-horizontal-com-html5-e-css3/37205

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×