Menú desplegable multinivel con CSS puro

Vista prévia

Descripción

Sólo otra implementación CSS pura del menú desplegable multinivel diseñado para la navegación del sitio.

Funcionamiento

Primero debe cargar la hoja de estilo de núcleo en la sección Head de la Página Web.

<link rel="stylesheet" href="css/style.css">

Cree el menú desplegable multinivel a partir de las listas HTML anidadas siguiendo la estructura de marcado como esta:

<div class="navigation-wrapper">

<div class="container">


<div class="navigation">



<div id="main-menu-container">




<div id="main-menu" class="nav">





<li class="menuparent">






<a href="#">Home</a>






<ul class="sub-menu">







<li><a href="#">test1</a></li>







<li><a href="#">test2</a></li>







<li class="menuparent">








<a href="#">test3</a>








<ul class="sub-menu">









<li><a href="#">test1</a></li>









<li><a href="#">test2</a></li>









<li class="menuparent">










<a href="#">test3</a>










<ul class="sub-menu">











<li><a href="#">test1</a></li>











<li><a href="#">test2</a></li>











<li><a href="#">test3</a></li>










</ul>









</li>








</ul>







</li>






</ul>





</li>





<li class="menuparent">






<a href="#">Template</a>






<ul class="sub-menu">







<li><a href="#">test1</a></li>







<li><a href="#">test2</a></li>







<li><a href="#">test3</a></li>






</ul>





</li>





<li>






<a href="#">Contact</a>





</li>




</div>



</div>


</div>

</div>
</div>