Creación de menú

Ya que conocemos las etiquetas básicas para crear una esctructura en HTML5 y tambien conocemos su propiedades en CSS3.
A continuación haremos un sencillo menu con ambos. Entonces para realizar la estructura de nuestro menú en HTML, usaremos la siguiente estructura:

<html>
                       <head>
                        <title>Menu en Html5 y Css3</title>
                        </head>
                        <body>
                            <div id="header">
                                <ul class="nav">
                                    <li><a href="">Inicio</a></li>
                                    <li><a href="">Lecturas</a>
                                        <ul>
                                            <li><a href="">Hola Mundo</a></li>
                                                <ul>
                                                    <li><a href="">Hola Mundo 2</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a href="">Actividades</a>
                                        <ul>
                                            <li><a href="">Actividades 1</a></li>
                                            <li><a href="">Actividades 2</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="">Autores</a></li>
                                </ul>
                            </div>
                        </body>
                    </html>
                    
Lo cual nos da como resultado lo que vemos a

 continuación:

                       See the Pen MERZKN by Whitney (@Whitney16) on CodePen.
                       
                     

                       Ahora usaremos las siguientes propiedades de css
 referenciando las etiquetas
 de nuestro documento HTML
                       

                       * {
                            margin:0px;
                            padding:0px;
                        }
            
                        #header {
                            margin:auto;
                            width:500px;
                            font-family:Arial, Helvetica, sans-serif;
                        }
                        ul, ol {
                            list-style:none;
                        }
            
                        .nav > li {
                            float:left;
                        }
            
                        .nav li a {
                            background-color:#f0b429;
                            color:#fff;
                            text-decoration:none;
                            padding:10px 12px;
                            display:block;
                        }
            
                        .nav li a:hover {
                            background-color:#005883;
                        }
            
                        .nav li ul {
                            display:none;
                            position:absolute;
                            min-width:140px;
                        }
            
                        .nav li:hover > ul {
                            display:block;
                        }
            
                        .nav li ul li {
                            position:relative;
                        }
            
                        .nav li ul li ul {
                            right:-140px;
                            top:0px;
                        }
                        No veremos ninguna reaccion en un editor de texto, puesto que las propiedades de css3, se usan para dar estilos

 a la estructura
 que hacemos en nuestros documentos HTML.
Ahora uniremos ambos lenguajes y tendremos algo como esto
                        

                        See the Pen MERZEY by Whitney (@Whitney16) on CodePen.

Creación de menú con HTML5 y CSS3

Lo cual nos da como resultado lo que vemos a continuación:

Ahora usaremos las siguientes propiedades de css referenciando las etiquetas de nuestro documento HTML

No veremos ninguna reaccion en un editor de texto, puesto que las propiedades de css3, se usan para dar estilos a la estructura que hacemos en nuestros documentos HTML.Ahora uniremos ambos lenguajes y tendremos algo como esto See the Pen MERZEY by Whitney (@Whitney16) on CodePen.

Lo cual nos da como resultado lo que vemos a

continuación:

Ahora usaremos las siguientes propiedades de css
referenciando las etiquetas
de nuestro documento HTML

No veremos ninguna reaccion en un editor de texto, puesto que las propiedades de css3, se usan para dar estilos

a la estructura
que hacemos en nuestros documentos HTML.
Ahora uniremos ambos lenguajes y tendremos algo como esto

See the Pen MERZEY by Whitney (@Whitney16) on CodePen.