Puede crear esto por su cuenta. ¡Es fácil con CSS sin limitación! He creado uno para usted, espero que tenga sentido.
HTML:
CSS:
* {
margen: 0;
relleno: 0;
tamaño de la caja: border-box;
}
cuerpo{
fondo: # e9e9e9;
font-family: “sans-serif”;
}
.navegación{
fondo: #ccc;
relleno: 0 15px;
posición: relativa;
}
.navigation_wrapper li {
estilo de lista: ninguno;
pantalla: bloque en línea;
}
.navigation_wrapper li a {
decoración de texto: ninguno;
estilo de lista: ninguno;
pantalla: bloque en línea;
acolchado: 12px 15px;
color: # 666;
borde inferior: 2px discontinuo transparente;
}
.navigation_wrapper> li> a: hover {
fondo: #fff;
borde inferior: 2px discontinuo # f00;
}
.has_dropdown: coloca el cursor sobre .dropdown_menu {
bloqueo de pantalla; / * mostrar clase al pasar el mouse * /
}
.Menú desplegable{
pantalla: ninguno;
fondo: #bbb;
ancho: 100%;
acolchado: 15px;
posición: absoluta;
Top 100%;
izquierda: 0;
}
.dropdown_menu li {
pantalla: bloque en línea;
ancho: 30%;
}
.dropdown_menu li a {
decoración de texto: ninguno;
estilo de lista: ninguno;
color: # 666;
acolchado: 15px;
pantalla: bloque en línea;
ancho: 100%;
altura: 80 px;
radio de borde: 4px;
margen inferior: 4px;
fondo: #eee;
}
Puede ampliarlo aún más con CSS y agregar algunas funcionalidades con jQuery. Aquí también está el enlace JS Bin para el código anterior.
Todo lo mejor