<html>

<head>
   <title>Menu</title>
   <script src="https://kit.fontawesome.com/50d057ce3b.js" crossorigin="anonymous"></script>
</head>

<body>
   <header>
      <nav>
         <ul>
            <li><a href="#"><span class="primero"><i class="icon fas fa-home"></i></i></span>Inicio</a></li>
            <li><a href="#"><span class="segundo"><i class="icon fas fa-tags"></i></span>Categorias</a>
               <ul>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 2</a></li>
                  <li><a href="#">Item 3</a></li>
               </ul>
            </li>
            <li><a href="#"><span class="tercero"><i class="icon fas fa-suitcase"></i></span>Servicios</a></li>
            <li><a href="#"><span class="cuarto"><i class="icon fas fa-file-alt"></i></span>Acerca de</a></li>
            <li><a href="#"><span class="quinto"><i class="icon fas fa-envelope"></i></span>Contacto</a></li>
         </ul>
      </nav>
   </header>
</body>

</html>
* {
   margin: 0;
   padding: 0;
}
header {
   margin-top: 10px;
   width: 100%;
   height: 150px;
   overflow: hidden;
   position: relative;
}
nav {
   top: -20px;
   position: absolute;
   left: 0;
   right: 0;
   margin: 20px auto;
   max-width: 1000px;
   width: 90%;
}
nav ul {
   list-style: none;
}
nav > ul {
   display: table;
   width: 100%;
   background: #000;
   position: relative;
}
nav > ul li {
   display: table-cell;
}
/* Sub menu */
nav > ul > li:hover > ul {
   display: block;
   height: 100%;
}

nav > ul > li > ul {
   display: block;
   position: absolute;
   background: #000;
   left: 0;
   right: 0;
   overflow: hidden;
   height: 0%;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
nav > ul li a {
   color: #fff;
   display: block;
   line-height: 20px;
   padding: 20px;
   position: relative;
   text-align: center;
   text-decoration: none;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

nav > ul > li > ul > li a:hover {
   background: #5da5a2;
}
nav > ul > li > a span {
   background: #174459;
   display: block;
   height: 100%;
   width: 100%;
   left: 0;
   position: absolute;
   top: -55px;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
nav > ul > li > a span .icon {
   display: block;
   line-height: 60px;
}
nav > ul > li > a:hover > span {
   top: 0;
}
nav > ul > li:hover > a > span {
   top: 0;
}
/*Colores*/
nav ul li a .primero {
   background: #0e5061;
}
nav ul li a .segundo {
   background: #5da5a2;
}
nav ul li a .tercero {
   background: #f25724;
}
nav ul li a .cuarto {
   background: #174459;
}
nav ul li a .quinto {
   background: #37a4d9;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.