*{
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
nav{
height: 80px;
display: flex;
padding: 0 50px;
justify-content: space-between;
align-items: center;
}
nav ul{
display: flex;
}
nav ul li a{
padding: 7px 10px;
margin: 0 5px;
font-size: 18px;
}
nav ul li a:hover{
background-color: #ef2219;
color: #fff;
}
/*--------------------submenu---------------*/
.children{
display:none;
}
nav ul li a:hover + ul, nav ul li ul:hover{
display:flex;
position: absolute;
flex-direction: column;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<nav>
<div>
<img class="img-menu" src="">
</div>
<ul>
<li class="menu__ul_li"><a>NOSOTROS</a></li>
<li class="submenu">
<a href="#">DEPORTES</a>
<ul class="children">
<li><a href="#">tenis </a></li>
<li><a href="#">futbol</a></li>
</ul>
</li>
<li class="menu__ul_li"><a>ALGO</a></li>
<li class="menu__ul_li"><a>CONTACTO</a></li>
</ul>
</nav>
</body>
</html>
mas alla de la separacion de los botones del submenu, quiero saber por que el fondo del boton TENIS se superpone al boton de deportes y no los separa los paddings de cada uno cuando toco el boton TENIS, el background de ese boton tapa lo que seria el background del boton DEPORTES. quiero saber por que pasa eso, vi soluciones que son totalmente distintas. pero quiero entender como funciona