Super Flat multinivel menú desplegable con CSS puro

Vista prévia

Descripción

Un enfoque CSS puro para crear un menú desplegable multinivel de estilo plano para la navegación de su sitio.

Funcionamiento

Envuelva los elementos de menú jerárquicos en listas HTML anidadas.

<nav class="menu">

<ul>


<li><a href="">Menu One</a>



<ul>




<li><a href="">Sub Menu One</a></li>




<li><a href="">Sub Menu One</a>





<ul>






<li><a href="">Sub Menu Two</a></li>






<li><a href="">Sub Menu Two</a></li>






<li><a href="">Sub Menu Two</a></li>






<li><a href="">Sub Menu Two</a></li>





</ul>




</li>



</ul>


</li>


<li><a href="">Menu One</a>



<ul>




<li><a href="">Sub Menu One</a></li>




<li><a href="">Sub Menu One</a></li>




<li><a href="">Sub Menu One</a>





<ul>






<li><a href="">Sub Menu Two</a></li>






<li><a href="">Sub Menu Two</a></li>






<li><a href="">Sub Menu Two</a></li>






<li><a href="">Sub Menu Two</a>







<ul>








<li><a href="">Sub Menu Three</a></li>








<li><a href="">Sub Menu Three</a></li>








<li><a href="">Sub Menu Three</a></li>







</ul>






</li>





</ul>




</li>



</ul>


</li>


<li><a href="">Menu One</a></li>


<li><a href="">Menu One</a></li>

</ul>
</nav>

El CSS principal para activar el menú desplegable.

.menu {

background-color: #fff;

width: 100%;

height: 60px;
}

.menu ul {

background-color: #fff;

text-align: center;
}

.menu ul li ul {

display: none;

opacity: 0;

position: absolute;

top: 60px;

width: 100%;

background-color: #fff;

transform: all .5s;
}

.menu ul li ul:hover {

display: block;

opacity: 1;
}

.menu ul li ul li { width: 100%; }

.menu ul li ul li ul {

position: absolute;

top: 0;

left: 100%;
}

.menu li {

width: 25%;

float: left;

position: relative;
}

.menu li a {

display: block;

color: #666;

line-height: 60px;
}

.menu li a:hover { background-color: #f0f0f0; }

.menu li a:hover + ul {

display: block;

opacity: 1;
}