Submenu CSS

Kaique GP · 30 de junho de 2017

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>

30 de junho de 2017

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

Kaique GP · 3 de julho de 2017

@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á.

Entrar

Submenu CSS

Posts recomendados

Kaique GP

Link para o comentário

Compartilhar em outros sites

Visitante

Link para o comentário

Compartilhar em outros sites

Kaique GP

Link para o comentário

Compartilhar em outros sites

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos