Estoy intentando crear un menú al que al pasar el ratón por alguno de los botones aparezca un menú desplegable. El problema es que no consigo centrar el menú desplegable con el botón que lo activa:
<html>
<head>
</head>
<body>
<ul class="menu">
<li class="btn">Menu1
<ul class="sublista">
<li><a href="#" class="content">hola1</a></li>
<li><a href="#" class="content">hola11</a></li>
<li><a href="#" class="content">hola111</a></li>
<li><a href="#" class="content">hola1111</a></li>
</ul>
</li>
<li class="btn">Menu2
<a href="#" class="content">hola2</a>
</li>
<li class="btn">Menu3
<a href="#" class="content">hola3</a></li>
</ul>
</body>
</html>
CSS
.menu{
list-style: none;
display: flex;
justify-content:space-around;
}
.content{
display: none;
position: absolute;
min-width: 5%;
padding: 10px 10px 10px 10px;
background-color: #00216a;
color:white;
border-radius: 2px;
}
.btn:hover .content{
display: block;
}
.sublista{
list-style: none;
padding-top: 0;
}
.sublista li{
padding: 19px 0 20px 0;
justify-content: left;
}
Y me gustaría centrarlo y a ser posible pero no me importa mucho, añadir un efecto de transición a la hora de desplegar el menú, que no se muestre todo al mismo segundo.
Gracias!