Hola espero tengan un excelente día. Estoy empezando con css y html y en este momento estoy tratando de hacer una menú desplegable con hover, y agregarle estilo con css, quiero que al pasar el mouse cambie el color y se desplieguen los items pero no hay caso de que me funcione agradecería su ayuda y comprensión para saber en que estoy fallando. Gracias.
Este es el código hecho:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>Menu</header>
<nav class="all">
<a id="title" href="">
<ul>Inicio
<li>Productos</li>
<li>Empleados</li>
<li>Nosotros</li>
</ul></a>
<a id="title" href="">
<ul>Contacto
<li>Mapa</li>
<li>Telefono</li>
</ul></a>
<a id="title" href="">
<ul>FAQ</ul>
</a>
<a id="title" href="">
<ul>Opiniones
<li>Sugerencias</li>
<li>Comentarios</li>
</ul></a>
</nav>
<style type="text/css">
.all {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
#title {
display: block;
padding: 1em;
background-color: #F9B55C;
text-decoration: none;
color: #191C26;
}
#title ul : hover {
background-color: #CC678B;
}
#title ul > li {
display: none;
}
#title > ul li : hover {
display: block;
}
</style>
</body>
</html>