menu desplegable

by Slee

HTML

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Menù Desplegable | Html-Css</title>
    <link rel="stylesheet" href="estilos.css" />
  </head>
  <body>
    <header class="header">
      <div class="container">
        <div class="logo">
          <h1>LOGO</h1>
        </div>
        <nav class="menu">
          <ul>
            <li><a href="#">Inicio</a></li>
            <li>
              <a href="#">Empleados <i class="icon-abajo2"></i></a>
              <ul class="submenu">
                <li><a href="#"> Juan </a></li>
                <li><a href="#"> Paco </a></li>
                <li><a href="#"> Diana </a></li>
              </ul>
            </li>
            <li><a href="#">Servicios</a></li>
            <li>
              <a href="#">Contacto <i class="icon-abajo2"></i></a>
              <ul class="submenu">
                <li><a href="#"> Email </a></li>
                <li><a href="#"> Mapa </a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <!-- Portada   ------->
    <div class="portada"></div>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
.header {
  width: 100%;
  height: 65px;
  background: #fff;
  position: fixed;
}
.container {
  max-width: 1100px;
  margin: auto;
}
.logo {
  float: left;
  line-height: 65px;
}
.menu {
  float: right;
  line-height: 65px;
}
.menu ul {
  display: flex;
  list-style: none;
}
.menu a {
  display: block;
  padding: 0px 20px;
  text-decoration: none;
  color: #6d6d6d;
  transition: all 500ms ease;
}
.menu a:hover {
  background: #cc673b;
  color: #fff;
}
.menu .submenu {
  background: #fff;
  box-shadow: 3px 10px 10px rgba(0, 0, 0, 0.2);
  display: none;
}
.menu .submenu li a {
  line-height: 50px;
}
.menu ul li a:hover + ul,
.menu .submenu:hover {
  display: block;
}
/*estilos para la portada*/
.portada {
  width: 100%;
  height: 520px;
  background: url("https://png.pngtree.com/thumb_back/fw800/background/20201019/pngtree-polygonal-vector-background-horizontal-banner-for-web-pages-presentations-layouts-covers-image_422832.jpg");
  background-size: 100vw 100vh;
}