Eu fiz um menu simples com drop box, mas quando eu passo o mouse sobre ele, os outros elementos da minha li quebra. Gostaria de saber por quê.
body {
font-family: 'Raleway', sans-serif;
}
/* Menu */
.menu {
box-sizing: border-box;
width:100%;
height: 100px;
background-color: #000;
color: #4d8c8a;
display: inline-block;
font-size: 20px;
text-align: center;
}
.menu li{
display: inline-block;
padding-right: 10px;
}
/* Sub Menu */
.menu .sub-menu{
box-sizing: border-box;
display:none;
flex-direction: column;
width: 100%;
height:100%;
background-color: #000;
border: solid 2px #4d8c8a;
position: relative;
}
.menu #sub-menu li{
padding: 5px;
}
.menu ul li:hover > .sub-menu{
display: flex;
}
#submenu2{
position: absolute;
top: 75px;
left: 95px;
}
<!DOCTYPE html>
<html>
<head>
<title>Front-End.Erian</title>
<!-- Metas -->
<meta charset="utf-8">
<!-- Fonte -->
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<!-- Css -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<!-- JavaScript -->
<link rel="script" href="js/script.js"/>
</head>
<body>
<nav class="menu">
<ul>
<li>Home</li>
<li><a href="#">Empresa</a>
<ul class="sub-menu">
<li>Sub1</li>
<li>Sub1</li>
<li>Sub1</li>
<li>Sub1
<ul class="sub-menu" id="submenu2">
<li>Sub2</li>
<li>Sub2</li>
<li>Sub2</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</li>
<li>Sobre Nós</li>
<li>Contato</li>
</ul>
</nav>
</body>
</html>