Crear un menú desplegable multinivel con CSS puro

Vista prévia

Descripción

Un menú desplegable de varios niveles de diseño plano construido con marcado HTML simple y CSS puro. Creado por < a href = "https://codepen.io/twodogstar" target = "_ blank" rel = "noopener" > twodogstar .

Funcionamiento

CODiE el menú desplegable de varios niveles con las listas HTML anidadas como se indica a continuación.

<ul class="main-navigation">

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

<li><a href="#">Front End Design</a>


<ul>



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



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




<ul>





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





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





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




</ul>



</li>



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




<ul>





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





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




</ul>



</li>


</ul>

</li>

<li><a href="#">WordPress Development</a>


<ul>



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



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



<li><a href="#">Custom Post Types</a>




<ul>





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





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




</ul>



</li>



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


</ul>

</li>

<li><a href="#">About Us</a></li>
</ul>

Establezca la propiedad de posición CSS del < li del padre > en ' relative '.

ul {

list-style: none;

padding: 0;

margin: 0;

background: #1bc2a2;
}

ul li {

display: block;

position: relative;

float: left;

background: #1bc2a2;
}

El CSS para ocultar los submenús.

li ul { display: none; }

ul li a {

display: block;

padding: 1em;

text-decoration: none;

white-space: nowrap;

color: #fff;
}

ul li a:hover { background: #2c3e50; }

Muestra el menú desplegable al pasar el cursor.

li:hover > ul {

display: block;

position: absolute;
}

li:hover li { float: none; }

li:hover a { background: #1bc2a2; }

li:hover li a:hover { background: #2c3e50; }

.main-navigation li ul li { border-top: 0; }

Muestra los menús desplegables de segundo nivel a la derecha del menú desplegable de primer nivel.

ul ul ul {

left: 100%;

top: 0;
}

Simple clearfix.

ul:before,
ul:after {

content: " "; /* 1 */

display: table; /* 2 */
}

ul:after { clear: both; }