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 

ul#navmenu-h
{
 display: block;
 background:#3399FF;
 list-style: none;
 margin-left:-1px;
 padding-left:3px;
 height:42px;
 /*position: relative;*/
}
ul#navmenu-h ul
{
 display: none;
 left: 0;
 list-style: none;
 margin: 0;
 position: absolute;
 top: 100%;
 width: 100px;
 margin-left:-40px;
 margin-top:1px;
}
ul#navmenu-h ul ul
{
 left: 100%;
 top: 0;
 z-index: 980;
 margin-top:-1px;
 margin-left:-40px;
}

ul#navmenu-h li
{
 display: inline;
 float: left;
 position: relative;
 z-index: 980;
 margin-top:4px;
}
ul#navmenu-h ul li
{
 display: block;
 width: 100%;
 z-index: 980;
 margin:0px;
 border: 1px solid #FFF;
}
ul#navmenu-h a
{
 color: #fff;
 display: block;
 float: left;
 font: bold 14px/23px Arial, sans-serif;
 height:25px;
 text-align:left;
 padding:6px 6px;
 text-decoration: none;
}
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a
{

 background:#33CCFF;
 color: #FFF;
 z-index: 980;
}
ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a
{
 background:#999999;
 float: none;
 z-index: 980;
}
ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a
{
 background:#a1c84f;
}
ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a
{
 background: #A9D54D;
}
ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a
{
 background:#a1c84f;
}
ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a
{
 background: #666;
}
ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover
{
 background: #333;
}
ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul
{
 display: none;
}
ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul
{
 display: block;

}

Y con ese CSS ya verán un menú desplegable completamente armado, si bien necesitaran personalizarlo, básicamente necesitaran cambiar, fondos, bordes, margin y padding.

Las primeras 50 líneas son de configuración principal y el resto es para terminar de decorar cada uno de los submenus, este CSS es muy práctico y funciona (Aunque usted no lo crea) en Internet Explorer 6, prácticamente al 100%(creo que lo que se modifica es el padding y ya).

Yo lo uso en la mayoría de mis proyectos y les puedo asegurar que funciona muy bien y no tiene que depender de algún Javascript como era de esperarse.

A continuación les dejo el link al demo para que vean que si funciona, si encuentro el link prometo ponerlo, pero en serio ya tiene como mas de 6 meses que me lo encontré y pues no recuerdo de donde aprendí esto.

Ver Demo

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

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

#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%;
}

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

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.

La lista completa en | Web Form Design: Modern Solutions and Creative Ideas

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

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

Pero que al parecer en webkit ya se esta implementando.

@font-face se trata de que la fuente pueda ser descargada desde la web aunque el usuario no la tenga instalada la propiedad puede ser usada de la siguiente forma

[source:css]
@font-face {
font-family: “Kimberley”;
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format(“truetype”);
}
h1 { font-family: “Kimberley”, sans-serif }

[/source]

De esta forma descargamos la funente kimberley para que posteriormente la podamos usar en nuestros estilos.

Sin embargo esta especificacion solo la soporta Webkit.

Ojala y con la llegada del HTML 5 y el CSS 3 ya los navegadores soporten esta especificación, mmmm otra vez sufriremos con Iexplorer(me imagino), ya que…

Usen Firefox..

Visto en | Fuentes descargables en Webkit y @font-face

Pero hoy localice algo que sin duda nos ayudara a corregir todo esto.

Son 70 Ideas para poder codificar mejor nuestros CSS, les dejo el link estan en ingles pero con varios ejemplos, que sin duda nos hara ser mejores programadores.

70 Expert Ideas For Better CSS Coding

Pues mientras estoy preparando eso, que les parece, un link que me encontré en Ajaxian.

Bueno resulta que a veces muchos desarrolladores, no le damos el trato que se merece al campo HTML de tipo FILE.
Pero para poderlo personalizar usaremos css y javascript veamos el ejemplo.

Tenemos primero el campo file, les recomiendo seguir el ejemplo y luego ajustarlo a nuestros gustos ya que el ejemplo lo tome de la web del autor.

[source:xhtml]

Luego ponemos este css

[source:css]

.SI-FILES-STYLIZED label.cabinet
{
width: 79px;
height: 22px;
background: url(btn-choose-file.gif) 0 0 no-repeat;

display: block;
overflow: hidden;
cursor: pointer;
}

.SI-FILES-STYLIZED label.cabinet input.file
{
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
[/source]

Para personalizarlo a nuestro gusto debemos de utilizar una minilibreria, la cual nos permitira hacer los cambios pertinentes, no pesa mucho; su nombre es SI

[source:xhtml]

[/source]

Una vez cargados los campos, podemos llamar a la funcion, recuerden que esto lo pueden hacer desde la cabecera de nuestro HTML siempre y cuando los elementos del DOM esten cargados, o bien pueden usar la minilibreria JXS.

[source:javascript]

SI.Files.stylizeAll();

[/source]

Y por ultimo para hacer referencia a que campo queremos darle formato lo hacemos de dos formas.

Por ID

[source:javascript]

SI.Files.stylizeById(‘input-id’);

[/source]

O por nodo del elemento

[source:javascript]

SI.Files.stylize(HTMLInputNode);

[/source]

Ejemplo de llamadas a la funciones

[source:javascript]

SI.Files.htmlClass = ‘SI-FILES-STYLIZED’;
SI.Files.fileClass = ‘file’;
SI.Files.wrapClass = ‘cabinet’;

[/source]

Recuerden que usa la libreria SI

Via | A Cheaky Way to Style an input type=”file”
Pagina Demo | http://www.shauninman.com/assets/examples/styling-file-inputs/

Descarga de el ejemplo | styling-file-inputs.zip
Enlace del autor | http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom