Para hacer un Menú desplegable, lo primero que se nos viene a la cabeza es, usar una solución basada en la combinación de HTML, CSS y Javascript, lo cual casi siempre nos resuelve nuestros problemas.

Sin embargo yo hace tiempo pensé en que tal vez se podría hacer sin tener que usar Javascript(Claro sin efectos ), y teniendo esto en mente me dispuse a buscar una solución para esto.

Y la encontré la solución, no recuerdo bien donde (Si logro encontrar el recurso podre el link), insisto no es mío este tip, pero me pareció útil compartirlo, y claro tiene una ventaja muy grande, la cual es, que es muy fácil de configurar y de usar.

Primero que nada necesitaremos una lista, la cual estará integrada así.

La lista principal será el menú, las listas de segundo nivel serán los submenus que estarán ocultos y puede contener hasta un tercer nivel, y se desplegaran de la siguiente forma, menú principal en horizontal, submenu segundo nivel vertical (oculto), submenu tercer nivel derecha.

La único que necesitara nuestra lista  es un id y con eso nos será suficiente.

<ul id="navmenu-h">
 <li>
 <a href="/">Inicio</a> <!-- Este es un uno de los menus -->
 </li>
 <li>
 <a href="/servicios">Servicios</a>
 <ul>              <!-- Esta es la lista del submenu, los li son los submenus -->
 <li>            <!-- Este es un uno de los submenus -->
 <a href="/noticias">Noticias</a>
 </li>
 </ul>
 </li>
 <li>
 <a href="/ventas">Ventas</a>
 <ul>
 <li>            <!-- Este es un uno de los submenus -->
 <a href="/reportes">Reportes</a>
 </li>
 <li>
 <a href="/categoria">categoria</a>
 <ul>              <!-- Esta es la lista del submenu 3er Nivel, los li son los submenus -->
 <li>            <!-- Este es un uno de los submenus3 Nivel -->
 <a href="/sucursal1">Surcursal 1</a>
 </li>
 <li>            <!-- Este es un uno de los submenus3 Nivel -->
 <a href="/sucursal2">Surcursal 2</a>
 </li>
 <li>            <!-- Este es un uno de los submenus3 Nivel -->
 <a href="/sucursal3">Surcursal 3</a>
 </li>
 </ul>
 </li>
 </ul>
 </li>
</ul>

Y ha dicha lista agregaremos el siguiente css 

Css Cascading Style Sheet

Sabemos que cada día nos estamos especializando mas en la mejora de nuestro código, y leo en el blog de Andres(aka Anieto2K), que Aloe Studio, se han puesto a trabajar con el ordenamiento de las propiedades css,  agrupadas en secciones para comprenderlas mejor.

• Display y flujo
• Posición
• Dimensiones
• Margenes, Padding, Border,…
• Tipografía
• Background
• Opacidad,Cursores,…

Aunque entra en conflicto otra técnica que supe hace poco y consistía en ordenar todas las propiedades css por orden alfabético, por ejemplo (“border,display,font,z-index,etc“).

Sin bien estas técnicas no lograran que corra mejor nuestro sitio, si nos pueden ayudar a organizar y hasta disminuir nuestro código de una manera muy eficiente, usando alguna de ellas.
Ejemplo de como se vería un código con este tipo de orden.

el {
display: ;
visibility: ;
float: ;
clear: ;

position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;

width: ;
min-width: ;
max-height-width: ;
height: ;
min-height: ;
max-height: ;
overflow: ;

margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;

border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;

border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ;

border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;
outline: ;
list-style: ;

table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;

font: ;
font-family: ;
font-size: ;
line-height: ;
font-weight: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
color: ;

background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;
opacity: ;
cursor: ;
content: ;
quotes: ;
}

Y coincido dice Andres, creo que esta es un mejor opcion que la que comente anteriormente(la de ordenar css alfabeticamente).

Creo que cada dia, iremos programando mejor.

Via  | Ordenación del CSS

Diseñas usando CSS, es bastante complicado, sobre todo si no conocemos todos o muchos atributos y valores que se le pueden asignar  a cada elemento de nuestra pagina.

Yo en lo personal ha veces me cuesta mucho trabajo, hacerle pequeñas modificaciones, ya que a veces es difícil recordar el valor o el atributo a modificar.

Lo mismo ha veces me ha pasado con Javascript, por lo cual hace tiempo me propuse hacer un framework, para trabajar con Javascript pero en “ESPAÑOL”, osea en ves de usar.

document.getElemntByID(elemento); cambiarlo a documento.obtenerElementoPorClave(elemento);

Suena algo tonto, pero algo así era mi idea, pero con tantas cosas en mente, decante por no hacerlo ya no que representaba ningún, beneficio(aparte del idioma).

Alguien también se le ocurrió, proponer de ¿porque no había un CSS, en castellano?, ¿suena tan descabellada la idea,? no creo. veamos como quedaría

[Css]

#menu{
ancho:300px;
alto:130px;
margen: 10 auto;
fuente: Arial, Helvetica, sin-serifa 0.7em gorda;
texto-adornado:subrayado;
flotacion:izquierda;
interlineado:0.9em;
espacio-entre-letritas:0,3em;
disponer:poco 60%;
}

[/Css]

Creo que seria bastante interesante, ojala y nos oiga la W3C, y nos tome en cuenta, y aunque esto suene gracioso, no hay que olvidar que no debemos dejar morir a nuestro querido idioma español/castellano.

Vía | CSS con humor

Y ya que estamos entrados con esto de las listas les dejo también unos diseños de formularios que están muy impresionantes, a mi me gustaron bastante inclusive me he inspirado para hacer algunos en un par de proyectos.

Creo que a veces no tomamos en cuenta esta parte sin embargo esta parte es algo sumamente fundamental para interactuar con los usuarios, de lo contrario, sentirán como si el sitio fuera algo raro o no muy amigable.

Nuevamente les pongo algunos diseños y enlaces de los que mas me han gustado, el resto lo encontraran en la pagina de quien hizo esta recopilación que ahora si son de smashinmagazine, en donde también hay otros, diseños pero me gustaron mucho mas estos.

Como sabrán me gusta estar rediseñando mi blog muy seguido, esto no es con el afán de molestarlos ni mucho menos, pero me gusta experimentar, salir de lo habitual.

El nuevo theme, mes esta costando trabajo diseñarlo, pero como lo prometí sera muy simple, mientras trato de estilizar mi tema, me dispuse a buscar diseños para los comentarios, y vi unos que realmente me impresionaron, y aunque no lo crean esta lista de formularios no esta en smashinmagazine, para muestra ayer cuando quise verlo de nuevo, tuve que leer todos los posts de este blog para descubrir donde estaba y por mas que pude no lo localicé hasta hoy, entonces no dejemos de perder la oportunidad, de mostrarselos.

Les recuerdo que, son diseños de inspiración o sea no son temas completos para descargar o algo así, son puros diseños de comentarios, bueno aquí se los dejo.

Hay un total de 30 diseños claro no puse todos aquí solo algunos que me gustaron, me inspirare en alguno para mi blog, eso tenganlo por seguro.

Mas diseños en | 30 Must See Comment Designs for Web Designers

En un reciente post les comente sobre algunas funcionalidades CSS casi desconocidas, pues dejenme decirles que CSS es sumamente poderoso tanto que Roman Cortes, se le hizo facil hacer un dibujo del popular personaje de la serie Los Simpsons, Homero, usando exclusivamente CSS

La verdad quedo super bien y funciona en varios navegadores, y plataformas la imagen que acompaña este post, es la que hizo con CSS, claro que yo la puse en imagen para que no afectara la visualizacion del post.

Pueden ver la imagen en CSS aqui | Homer CSS

Ultimamente que me estado metiendo de lleno a Css y al DOM, he visto como el CSS nos facilita enormemente la vida, y que hay algunas propiedades que, nos sirven para casi todo, viendo todo eso, me encontre un post, donde mencionan una serie de propiedades CSS que casi nunca usamos(yo he usado varias), [ING] | 15 Propiedades CSS