Menú desplegable con Css
En este pequeño artículo crearemos un menú desplegable con solo css apoyándonos de la pseudo-clase hover para poder llevar acabo el menú desplegable, lo primero que tenemos que hacer es crear la estructura con html y enlazar los estilos que vamos a necesitar.
Bueno lo primero es la estructura del html que costa de un nav div con un id menú luego una lista ul con una clase menup seguido de unos li para la opciones normales y dentro de un li vamos a crear otra lista ul que va hacer el menú desplegable el li llevara una clase dropdown vamos el código para entenderlo un poco más.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inicio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div id="menu">
<ul class="menup">
<li><a href="">opcion</a></li>
<li class="divider"></li>
<li class="dropdown"><a href="">opcion</a>
<ul>
<li><span></span><a href="#opcion1">opcion</a></li>
<hr>
<li><span></span><a href="#opcion2">opcion</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a href="">opcion</a></li>
<li class="divider"></li>
<li><a href="">opcion</a></li>
<li class="divider"></li>
<li class="dropdown"><a href="">opcion</a>
<ul>
<li><span></span><a href="#opcion1">opcion</a></li>
<hr>
<li><span></span><a href="#opcion2">opcion</a></li>
<hr>
<li><span></span><a href="#opcion3">opcion</a></li>
<hr>
<li><span></span><a href="#opcion4">opcion</a></li>
<hr>
<li class="dropdown_2"><span></span><a href="#opcion5">opcion</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li class="dropdown"><a href="">opcion</a>
<ul>
<li><span></span><a href="#opcion1">opcion</a></li>
<hr>
<li><span></span><a href="#opcion2">opcion</a></li>
<hr>
<li><span></span><a href="#opcion3">opcion</a></li>
</ul>
</li>
</div>
</nav>
</body>
</html>
Listo teniendo esta estructura tendremos que darle los estilos necesarios el código a continuación, y el truco está en saber usar la pseudo-clase hover y los Selector hijos >.
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
body{
margin: 0;
padding: 0;
font-family: 'PT Sans', sans-serif;
font-weight: 700;
}
nav{
width: 100%;
height: 35px;
}
#menu{
width: 100%;
height: 35px;
background: #E6E6E6;
float: left;
position: relative;
}
#menu .menup{
width: 960px;
height: 35px;
margin: 0 auto;
padding: 0px;
}
#menu li{
float:left;
position:relative;
padding: 6px 0;
margin: 0;
list-style: none;
}
#menu li a{
color:#424242;
font-size:12px;
padding: 10px 10px;
/* text-shadow: 0px -1px 0px #000; */
text-decoration: none;
text-transform: uppercase;
}
/*ocultamos el dropdown*/
#menu li > ul{
display:none;
position:absolute;
background: #424242;
padding: 0;
z-index: 2;
}
#menu li > ul li{
padding:0;
margin:1px 0;
list-style: none;
}
#menu li > ul li:first-child, #menu li:hover > ul li:last-child{
padding:0;
margin:0 0;
}
/*le damos el color blanco al enlance del submenu y el background negro */
#menu li:hover > a{
color:#fff;
background-color: #424242;
width: 120px;
}
#menu li > ul li a{
width: 150px;
margin: 0 0 0 5px;
display:block;
color: #fff;
}
/* Con esto mantenemos el codigo submenu activo */
#menu li:hover > ul{
display:block;
width: 150px;
top: 35px;
}
#menu .divider{
border-right: 1px solid #BCBCBC;
height: 23px;
}
#menu .dropdown::after{
content:"";
position: absolute;
top: 15px;
left: 52px;
width:0px;
height:0px;
border-style: solid;
border-width: 4.3px;
border-bottom-width:0px;
border-color: #BCBCBC transparent transparent transparent;
}
#menu li:hover::after{
border-color: #fff transparent transparent transparent;
}
hr{
margin: 0;
padding: 0;
width: 80%;
position: relative;
border-color: rgba(189, 189, 189, 0.6);
left: 10px;
}
#menu .dropdown span{
height: 15px;
width: 3px;
position: absolute;
top: 6px;
left: 5px;
}
Este seria el resultado final.
Bueno eso es todo espero que sea de su ayuda sé que ha sido bastante corto pero quería compartir esta forma de crear menús desplegables sin usar Jquery solo con css, me pareció muy bueno y quise compartirlo bueno hasta la próxima.
Soy John Serrano. Desarrollador Web Full-Stack. Entusiasta de las tecnologías web: JavaScript, Node.js, Docker, Firebase, React, etc. Me puedes encontrar en las siguientes redes sociales:
Si te gusta lo que lees puedes apoyarme haciendo una donación con PayPal, de antemano gracias por tu apoyo.
Puedes donar criptomonedas con:
TRX Tron red TRC20:
TR3nVEsRexQkdXasRLAXLW2n7DmyS7ksrq
BTC Bitcoin red BTC:
1Bd849Xr3T3i9nn96uF2JuYhp98wZyod6Q
BNB Smart Chain BSC:
0xe8ac8dc8e56208d4dad5f719ba627436187acc16
No hay un amor más grande que el dar la vida por los amigos. Juan 15:13
¿Te gusta lo que lees?
SuscríbeteOtros artículos

BEM Una manera de nombrar clases en CSS de forma inteligente
Descubre cómo BEM, la metodología de nomenclatura de clases en CSS, revoluciona la forma en que organizas y desarrollas tus proyectos web. Aprende a crear códig...

TypeScript desde Cero Descubriendo sus Ventajas y Fundamentos Básicos
Explora los fundamentos y ventajas de TypeScript, un lenguaje de programación que potencia el desarrollo con tipos estáticos. Aprende cómo usarlo para un código...

Promesas en JavaScript: Como manejar la asincronía de forma eficiente
Descubre cómo manejar la asincronía de forma eficiente en JavaScript con promesas. Aprende a optimizar tu código asincrónico y simplifica la complejidad de la a...