Menú horizontal con submenú
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: