¿Cómo crear un menú con CSS y HTML? Muy fácil y práctico

En este artículo explicare cómo crear un menú usando CSS y HTML. En un artículo anterior explique, Cómo crear un menú desplegable con jQuery como Facebook y Linkedin en asp.net
Normalmente vemos sitios web que contienen una barra de menú que se despliega cuando se pasa sobre ellos y que le da un toque muy padre y profesional a ti sitio web, en esta ocasión te mostrare como crear este menú. El ejemplo lo puedes descargar en la parte final de este post.
Paso 1
En primer lugar, añadir una hoja de estilos y un formulario o una página HTML.
A continuación, en la página HTML o del formulario Web de. NET añadimos un "Div" con el nombre como "divMenu".
Después de crear el Div, tenemos que añadir una lista que será nuestro menú y otra lista que será nuestro submenú, en seguida puedes ver el código HTML:
<div id="divMenu"> <ul> <li><a href="#">Inicio</a> <ul> <li><a href="#">Quienes somos?</a></li> <li><a href="#">Qué hacemos?</a></li> <li><a href="#">Organigrama</a></li> </ul> </li> <li><a href="#">Portafolio</a> <ul> <li><a href="#">ASP.NET</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">Nosotros</a></li> <li><a href="#">Blog</a> <ul> <li><a href="#">SEO</a></li> <li><a href="#">Social Media</a></li> <li><a href="#">AdSence</a></li> </ul> </li> <li><a href="#">Más info</a> <ul> <li><a href="#">Tips</a></li> <li><a href="#">Consejos</a></li> </ul> </li> <li><a href="#">Contacto</a></li> </ul> </div>
Con este código se verá así nuestra página cuando se ejecute:
Paso 2
Así que para que se vea bien nuestro menú vamos a darle el estilo en la hoja de estilos que habíamos añadido antes.
Añade este código en su hoja de estilos:
#divMenu, ul, li, li li { margin: 0; padding: 0; } #divMenu { width: 150px; height: 27px; } #divMenu ul { line-height: 25px; } #divMenu li { list-style: none; position: relative; background: #641b1b; } #divMenu li li { list-style: none; position: relative; background: #641b1b; left: 148px; top: -27px; } #divMenu ul li a { width: 148px; height: 25px; display: block; text-decoration: none; text-align: center; font-family: Georgia,'Times New Roman',serif; color: #ffffff; border: 1px solid #eee; } #divMenu ul ul { position: absolute; visibility: hidden; top: 27px; } #divMenu ul li:hover ul { visibility: visible; } #divMenu li:hover { background-color: #945c7d; } #divMenu ul li:hover ul li a:hover { background-color: #945c7d; } #divMenu a:hover { font-weight: bold; }
Espero que el ejemplo te sea de utilidad, envíanos un comentario para saber tus impresiones, el ejemplo lo puedes descargar de la siguiente liga: https://github.com/jiestrada/MenuCSS