¿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.

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:

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