Menú horizontal con submenú

CSS, HTML

Aquí os traemos un ejemplo de menú horizontal con submenús utilizando HTML y CSS:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Menú horizontal con submenú</title>
 <style>
 *{
 margin:0;
 padding:0;
 }
 .menu ul{
 float:left;
 width:100%;
 background-color:#6987BF;
 height: 40px;
 }
 .menu ul li{
 display: inline;
 float: left;
 margin-left: 0px;
 width: 100px;
 height: 100%;
 }
 .menu ul li a{
 display:block;
 text-decoration:none;
 cursor:pointer;
 line-height: 40px;
 text-align: center;
 color:lightgray;
 font-size: 14px;
 font-family: "Verdana";
 }
 .menu li ul li{
 margin: 0;
 float: left;
 display:inline;
 width: 100%;
 height: 40px;
 text-align: center;
 }
 .menu li ul a{
 line-height: 40px;
 color:gray;
 }
 .menu li ul{
 display: none;
 position:relative;
 z-index: 1;
 background-color: gray;
 width: 200px;
 height: auto;
 left: 0px;
 }
 .menu li ul li:hover{
 background-color:#6987BF;
 }
 .menu li:hover ul{
 display: block;
 float: left;
 }
 .menu li:hover a{
 color:white;
 }
 </style>
 </head>
 <body>
 <div class="menu">
 <ul>
 <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JAVASCRIPT</a></li>
 <li><a href="#">PHP</a></li>
 <li><a href="#">MYSQL</a></li>
 <li><a href="#">TODOS</a>
 <ul>
 <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JAVASCRIPT</a></li>
 <li><a href="#">PHP</a></li>
 <li><a href="#">MYSQL</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </body>
 </html>

Y aquí el resultado:


Escribe una respuesta


− 2 = 7