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;
}
