Cómo crear Custom CSS3 desplegable menús: menú desplegable CSS tutorial para principiantes (3 / 8 paso)

Paso 3: El HTML código

El primer paso en la creación de un menú es crear una lista desordenada en HTML. Más tarde sería estilo esta lista en un menú de navegación desplegable. Para crear menús desplegables multinivel, utilizamos anidadas listas desordenadas que tienen el mismo número de niveles como el número de niveles que requerimos en nuestro menú desplegable. Aquí está el código HTML de la lista.

<! html de doctype >
< html >
< head >
< meta charset = "utf-8" >
< title > ejemplo de proyecto < / title >
< link href="style.css" tipo = "text/css" rel = "stylesheet" / >
< /HEAD >

< cuerpo >
< header >
< div clase = "menu" >
< ul >
< li >< a href = "#" > Inicio < /a >< /li >
< li >< a href = "#" > categorías < /a >
< ul >
< li >< a href = "#" > Photoshop < /a >< /li >
< li >< a href = "#" > Wordpress < /a >< /li >
< li >< a href = "#" > Desarrollo Web < /a >
< ul >
< li >< a href = "#" > HTML < /a >< /li >
< li >< a href = "#" > CSS < /a >< /li >
< /ul >
< /li >
< /ul >
< /li >
< li >< a href = "#" > Acerca de nosotros < /a >
< ul >
< li >< a href = "#" > nuestra misión < /a >< /li >
< li >< a href = "#" > nuestros clientes < /a >< /li >
< li >< a href = "#" > contenido nosotros < /a >< /li >
< /ul >
< /li >
< li >< a href = "#" > Blog < /a >< /li >
< /ul >
< / div >
< / encabezado >
< /body >
< / html >

Como pueden ver estamos creando esta página en HTML5 y ya han incluido el fichero style.css, nuestros CSS principal código de la hoja. También hemos incluido ya una clase personalizada denominada menú principal < div > con que será estilo nuestro menú de navegación. Aunque hemos nombrado el menú de clase para este tutorial, para fines prácticos intenta ser más específico en el nombramiento, como a veces un sitio web contiene muchos tipos diferentes de menús como el menú de encabezado, menú de pie de página, menú, etc.. Tan con denominación apropiada se hace más fácil para la codificación de la página web y ayuda a otros a entender el código. Por ahora ya que no hay ninguna hoja de estilo actual, este código sólo creará una lista anidada desordenada con estilo por defecto.