Ir ao conteúdo

CSS Deixar este menu centralizado e fixo ao todo da página


Ir à solução Resolvido por navegantenarede,

Posts recomendados

Postado

Boa noite pessoal,

 

preciso centralizar este menu e faze-lo não sair da minha página quando eu fizer a rolagem

 

se alguem me passar um procedimento para isso, sou iniciante...

 

Até!

 

<head>
	<title>Lar doce Lar</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/style.css">
	<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>


<body>

	<nav class="menu">
		<ul>
			<li>Comodo <i class="faz fa-angle-down"></i>
				<ul>
					<li>Sala de estar</li>
					<li>Sala de almoço</li>
					<li>Cozinha</li>
					<li>Externo</li>
					<li>Banheiro</li>
					<li>Quarto</li>
					<li>Quarto infantil</li>
				</ul>
			</li>
			<li>Estilo <i class="faz fa-angle-down"></i>
				<ul>
					<li>Futurista</li>
					<li>Moderno</li>
					<li>Rustico</li>
					<li>Anos 90</li>
				</ul>
			</li>
			<li>Categorias <i class="faz fa-angle-down"></i>
				<ul>
					<li>Cama, Mesa e Banho</li>
					<li>Decoração</li>
					<li>Eletrodomésticos</li>
					<li>Geek</li>
					<li>Externo</li>
					<li>Iluminação</li>
					<li>Reforma</li>
				</ul>
			</li>
		</ul>
	</nav>

</body>
</html>
.menu ul li {
	font-family: 'Baloo Chettan', cursive;
	background-color: white;
	text-align: center;
	color: #ffbc14;
	font-weight: 6px;
	text-decoration: none;
	text-transform: uppercase;
	float: left;
	display: inline-block;
	line-height: 40px;
	width: 200px;
	height: 40px;
	padding: 0px;
}


.menu ul li:hover{
	background-color: #ffbc14;
	color: white;
	transition-delay: 1;
}

.menu ul{
	padding: 0;
}

.menu ul ul{
	display: none;
}

.menu ul li:hover > ul{
	display: block;
}

.menu {
	margin-top: -16px;
	width: 100%;
}

 

adicionado 5 minutos depois

Consegui trocando o "width: 200px;" para "width: 100%;", só que meu menu ficou com um item sobre o outro, sabem como conserto isso?

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades 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

×
×
  • Criar novo...