Cómo crear una miniatura con una descripción en la lista desplegable en HTML CSS

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

Es probable que necesite escribir su propio código CSS para crear un menú desplegable personalizado. Probablemente no podría usar el elemento HTML

Aquí hay un tutorial sobre cómo crear sus propios menús desplegables CSS, un ejemplo incluye una imagen: Desplegables CSS