Menú con submenú en html5 y css

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
     <title>Menú con submenus</title>
    <link rel="stylesheet" href="estilo.css" />

</head>
<body>
   <header>

  </header>
  

<!--Unicamente incluyo el menú en la etiqueta <nav> el resto es normal-->

<nav>
        <ul class="menu">
            <li><a href="#">Coches</a>
                <ul class="submenu">
                    <li><a href="#">Coche1</a></li>
                    <li><a href="#">Coche2</a></li>
                </ul>
            </li><!--cierro li de panes-->
            <li><a href="#">Moto</a>
                <ul class="submenu">
                    <li><a href="moto1.html">Moto1</a></li>
                    <li><a href="#">Moto2</a></li>
                    <li><a href="#">Moto3</a></li>
                </ul>
            </li>
            <li><a href="#">Camiones</a>
                <ul class="submenu">
                    <li><a href="#">Camión1</a></li>
                    <li><a href="#">Camión2</a></li>
                    <li><a href="#">Camión3</a></li>
                </ul>
            </li>
            <li><a href="#">Tractores</a>
                <ul class="submenu">
                    <li><a href="#">Tractor1</a></li>
                    <li><a href="#">Tractor2</a></li>
                    <li><a href="#">Tractor3</a></li>
                    <li><a href="#">Tractor4</a></li>
                </ul>
            </li>
        </ul>
    </nav>

...
</body>
</html>

/////////////////////////////////////////////////////////////////////////////////////////////
pagina estilo.css
//////////////////////////////////////////////////////////////////////////////////////////

 /*Pongo los margenes y padding a cero por si el navegador tiene alguno por defecto*/
 *{
     margin:0px;
     padding: 0px;
 }

 /*quito los puntitos de la lista*/
nav ul {
        list-style-type:none;
        width: 50px;
    }
  
/*quito el subrayado de los enlaces*/
nav a{
    text-decoration: none;
    color: white;/*Pongo la letra del menú de color blanco*/
}
/*Cuando se pase el menú por encima se vuelve el fondo negro y la letra amarilla*/
nav a:hover {
        background: black;
          color: yellow;
}

/*Hago flex al menú para poder ponerlo como fila*/
.menu{
    display: flex;
    flex-direction: row;
    background: orange;
    color: white;
    width: 500px;
    justify-content: space-around;
    height: 30px;
}

/*Oculto los submenus*/
.submenu{
    position: absolute;/*Dejo fijo el menú para que no se mueva cuando lo selecciono y se despliega el submenú*/
    display:none;
    width: 50px;
}

/*Muestro los submenus al pasar el ratón*/
nav li:hover > ul{
  
    display:block;
    background: orange;
    width: 70px;
}

/*pongo un ancho solo para que se vea mejor el menú*/
header{
    height: 50px;
    background: yellow;
}

/*Pongo el pie fijo*/
body{
    display: flex;
    flex-direction:column;
      min-height: 100vh;
}
main{
    flex-grow: 1;
    background: blue;
}

/**Fin del pie fijo*/























Comentarios

Publicar un comentario