Barra de menú de nivel ilimitado (ancho de contenido adaptable, desplazamiento de columna de menú de nivel infinito adaptable)

Efecto

codigo css

.yyui_menu1 { altura: 35px; altura de línea: 35px; tamaño de fuente: 15px; }

.yyui_menu1 li { flotador: izquierda; posición: relativa; }

Este nivel es navigation.yyui_menu1
li a { display: block; line-height: 35px; text-decoration: none; padding: 0px 20px; color: #333333; }

.yyui_menu1 li a: hover { color: #FF2A34; }

.yyui_menu1 li a.more:después de { contenido: " »"; }

.uno,.dos,.tres{ ancho:automático!importante; }

.one li ul { superior: 0; ajuste de línea: normal; }

.yyui_menu1 li ul li{ ancho:100%; ancho:-moz-disponible; ancho: -webkit-fill-disponible; ancho:llenar-disponible }

.yyui_menu1 li ul { posición: absoluta; flotador izquierdo; ancho: 320px; pantalla: ninguno; color de fondo: #FFFfff; índice z: 9999; }

Contenido adaptable width.yyui_menu1
li ul a { ancho: 100%; tamaño de cuadro: cuadro de borde; espacio en blanco: ahora rap; decoración de texto: ninguno; color: #333; }

.yyui_menu1 li ul a: hover { fondo: #B21E25; color: #FFFFFF; }

Submenú adaptativo
offset.yyui_menu1 li ul ul { arriba: 0; izquierda: 100%; }

enfocar

Centrarse principalmente en estilos css, los estilos manejan compensaciones infinitas

Código HTML (lenguaje de marco .net)

lenguaje jQuery

$('.yyui_menu1 li').hover(función () { $(esto).niños(“ul”).show(); }, función () { $(esto).niños(“ul”).hide (); });