Ajuda com menu dropdown

Pessoal, estou fazendo um menu dropdown e estou tendo problemas na exibição. Quando posiciono o mouse sobre uma opção para mostrar os submenus, ele aumenta o tamanho do header. Alguém sabe como solucionar ?

Quando posiciono o mouse sobre o elemento ele aumenta o tamanho do header.

HTML

<html>
	<head>
		<meta charset="UTF-8" />		
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<header>
		<nav class="menu">
			<ul>
				<li><a href="#">Argentina</a></li>
				<li><a href="#">Brasil</a>
					<ul>
						<li><a href="#">Norte</a></li>
						<li><a href="#">Nordeste</a>
							<ul>
								<li><a href="#">Bahia</a></li>
								<li><a href="#">Pernambuco</a></li>
								<li><a href="#">Sergipe</a></li>
								<li><a href="#">Alagoas</a></li>
							</ul>
						</li>
						<li><a href="#">Centro-Oeste</a></li>
						<li><a href="#">Sudeste</a>
							<ul>
								<li><a href="#">Espirito Santo</a></li>
								<li><a href="#">Minas Gerais</a></li>
								<li><a href="#">Rio de Janeiro</a></li>
								<li><a href="#">São Paulo</a></li>
							</ul>
						</li>
						<li><a href="#">Sul</a></li>
					</ul>
				</li>
				<li><a href="#">Colombia</a></li>
				<li><a href="#">Paraguai</a></li>
			</ul>
		</nav>
		<div style="clear: both;"></div>
	</header>
	</body>
</html>

CSS

header{

padding: 20px;

background-color: #2196F3;

}

.menu ul li{

background-color: #6da3f9;

width: 200px;

display: inline-block;

text-align: center;

line-height: 40px;

font-size: 15px;

position: relative;

}

.menu{

float: right;

}

.menu ul li:hover{

background-color: #2c69cc;

}

.menu ul{

padding: 0px;

}

.menu ul ul{

display: none;

}

.menu ul li:hover > ul{

display:block;

}

.menu ul ul ul{

margin-left: 201px;

top: 0px;

position: absolute;

}

.menu ul ul li:hover{

background-color: #144aa0;

}

.menu ul ul ul li:hover{

background-color: #062a66;

}

.menu a{

color: white;

text-decoration: none;

}

Fala @Ablaze, beleza cara?

Adicionei um position: absolute; no .menu ul ul { e funcionou. Segue exemplo:

Captura de tela 2022-03-30 135255

O resultado:

Vê aí se funfa.

1 curtida

Obrigado por responder amigo. Bem, aparentemente funcionou sem nenhum elemento após o header. O problema é quando adiciono elementos abaixo do header. Ele não mostra completamente os submenus.

Parece que a imagem está sobrepondo os menus, se for isso acho que basta adicionar a propriedade z-index:10; no .menu ul ul {

1 curtida

Funcionou amigo. Muito obrigado pela ajuda e atenção! :wink:

1 curtida