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:  
Kaique GP

Submenu CSS

Recommended Posts

Kaique GP    0

Olá, peço gentilmente uma ajuda, eu vi tutoriais de html e css no youtube e comecei a seguir os passos a passos até que consegui criar um site bem "ralézinho" fiz muitas modificações e então minha programação está uma bagunça. Estou tentando a dois dias inserir um submenu no meu menu porém tem muitos codigos que eu n entendo muito bem e no final acaba ficando errado meu submenu. Se alguém puder me ajudar eu sou muito grato. Quero fazer um submenu em "serviços" o html na parte de colocar uma "ul" dentro da "li" eu sei mas preciso de ajuda no css pois tem outras chamadas do mesmo "nav" com outra configuração e n estou conseguindo arrumar :/ 

 

body{
	font-family: 'Roboto', sans-serif;
	color: #333;
}
a:link, a:active, a:visited{
	color: #336699;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
/* grid 960px */
.linha{
	width: 770px;
	margin: 0 auto;
	overflow: auto;
	padding: 5px 0;
}
.coluna{
	padding: 0 10px;
	float: left;
}
.col1{
	width: 45px;
}
.col2{
	width: 109px;
}
.col3{
	width: 173px;
}
.col4{
	width: 237px;
}
.col5{
	width: 301px;
}
.col6{
	width: 365px;
}
.col7{
	width: 429px;
}
.col8{
	width: 493px;
}
.col9{
	width: 557px;
}
.col10{
	width: 621px;
}
.col11{
	width: 685px;
}
.col12{
	width: 749px;
}
/* estilos reutilizáveis */
.sem-padding{
	padding: 0 !important;
}
.sem-margin{
	margin: 0 !important;
}
h1, h2, h3, h4, h5, h6{
	font-weight: 500;
	margin: 10px 0 10px 0;
}
ul li. ol li{
	margin-bottom: 5px	
}
ul.inline li, ol.inline li{
	display: inline;
	margin-right: 15px;

}
ul.inline li:last-chield, ol.inline li:last-chield{
	margin-right: 0px;
	
}
ul.sem-marcador, ol.sem-marcador{
	list-style: none;
}
a.botao, input.botao{
	background: #1f3c58;
	padding: 5px 10px;
	border-radius: 3px;
	color: #ebebeb;
	cursor: pointer;
	margin: 5px 0;
	display: inline-block;
	border: none;
}

a.botao:hover, input.botao:hover{
	background: #315e8a;
	text-decoration: none;
}
img{
	max-width: 100%;
	height: auto;
}
iframe{
	max-width: 100%;
	
}
/* layout do site */
.header{
	background: #dee3e6;

}
h1.logo{
	font-weight: 300;
	color: #333333;
	letter-spacing: 0px;
	font-size: 17px;
	text-align: right;
	line-height: 90%;

}
.footer{
	background: #336699;
	color: #FFFFFF;
	padding: 20px 0;
	text-align: center;
	font-weight: 100;
}
.menu{
	text-transform: uppercase;
	text-align: right;
	margin-top: 20px;
}
.menu li a{
	border-radius: 3px;
}
.menu li a:hover{
	text-decoration: none;
	background: #1f3c58;
	color: #ebebeb;
}

ul.topo{
	font-weight: bold 300;
	text-align: right;
	list-style: none;
	line-height: 110%;
}
ul.padrão{
	font-size: 20px;
	line-height: 170%;
}
.contato label{
	display: block;
	font-size: 13px;
	font-weight: 300;
}
.contato input, .contato textarea{
	display: block;
	margin-bottom: 15px;
	padding: 5px 2%;
	width: 96%;
}
.contato textarea{
	height: 150px;	
}
.contato input.botao{
	width: auto;
}

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="utf-8">
	<title>MR Multiplicidade - Terceirização de Serviços</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700,500' rel='stylesheet' type='text/css' />
	<link rel="stylesheet" type="text/css" href="css/estilo.css" />
</head>
<body>
	<div class="header">
		<div class="linha">
			<header>
				<div class="coluna col4">
					<h1 class="logo">
						<img src="mult.jpg"  alt="" />
						<figcaption> Terceirização de Serviços </figcaption>
					</h1>	
						<ul class="topo">
							<li><strong>(11) 4376-0163</strong></li>
						</ul>
				</div>
				<div class="coluna col8">
					<nav>
						<ul class="menu inline sem-marcador">
							<li><a href="index.html">home</a></li>
							<li><a href="inst.html">institucional</a></li>
							<li><a href="servicos.html">serviços</a></li>
							<li><a href="contato.html">contato</a></li>
						</ul>
					</nav>
				</div>
			</header>		
		</div>			
	</div>
	<div class="linha">
		<section>
			<div class="coluna col7">
				<h2>Terceirização de Mão de Obra, exercendo as atividades:</h2>
				<ul class="padrão">
					<li>Portaria</li>
					<li>Controlador de acesso</li>
					<li>Limpeza</li>
					<li>Recepção</li>
					<a href="hist.html" target="_self">Historia</a>
				</ul>
			</div>
			<div class="coluna col5">
				<img src="servicos.png" alt="">
			</div>
		</section>
	</div>
	
				
	<div class="footer">
		<div class="linha">
			<footer>
				<div class="coluna col12">
					<span>&copy; 2016 - Multiplicidade - Terceirização de Serviços</span>
				</div>
			</footer>
		</div>
	</div>
</body>
</html>

 

 

 

Editado por DiF
Colocar os códigos no fórum com o botão CODE <>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom vamos la, primeiramente no HTML crie um mais um ul dentro de um li, e faça outros li dentro, mas pelo jeito isso você já sabe como citou no tópico.

 

Mas esta aqui um código como exemplo:

 

<nav>
           <ul class="menu">
              <li><a href="#">MENU 1</a></li>
              <li><a href="#">MENU 2</a></li>
                   <li><a href="#">MENU 3</a>
                     <ul>
                       <li><a href="#">MENU 3.1</a></li>  
                       <li><a href="#">MENU 3.2</a></li>
                       <li><a href="#">MENU 3.3</a></li>     
                     </ul>
                   </li>
               <li><a href="#">MENU 4</a></li>
               <li><a href="#">MENU 5</a></li>
            </ul>
        </nav>


No css edite o ul dentro do li lhe dando uma posição absoluta para posicionar o elemento no canto superior esquerdo do elemento no qual ele esta dentro que no caso é o li e aplique um display: none para fazer o submenu ficar invisivel.

 

nav ul li{
  position: absolute;
  display: none;
}

A seguir no seletor coloque o comando para que quando passe o mouse em cima do li que contei a ul do submenu ele mostre o ul em bloco.

 

.menu li:hover ul, .menu li.over ul{
    display: block;
}

E por fim faça com que ele mostre a li em blocos também.

 

.menu li ul li{
    display:block; 
    width:150px; /* Tamanho pré definido, de o tamanho que desejar*/
}

o que você precisa fazer é somente criar o submenu e fazer o comando para que ele apareça e desapareça

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
Kaique GP    0
  • Autor do tópico
  • @Luiz Henrique Canassa Muito obrigado pela atenção, vou testar!

    adicionado 14 minutos depois

    @Luiz Henrique Canassa acho que expliquei mal a minha dúvida, poderia dar uma olhada no meu css e ver onde está travando meu código?

    Obrigado desde já.

    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

    ×