Demo
Sitúate en Febrero y Semana 4.
Horizontal
Vertical
Fácil
Todo en un mismo documento.
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<title>Menu desplegable con 2 niveles</title>
<style>
#menu {
width: 500px;
margin: 0 auto
}
#menu>ul>li {
float: left
}
#menu>ul>li a {
display: block;
width: 100px;
height: 50px;
background: green;
text-align: center;
line-height: 50px
}
#menu>ul>li>ul {
display: none
}
#menu>ul>li>ul>li {
position: relative
}
#menu>ul>li>ul>li>a {
background: red
}
#menu>ul>li>ul>li>ul {
position: absolute;
left: 100px;
top: 0;
display: none
}
#menu>ul>li>ul>li>ul a {
background: #ff0
}
#menu ul {
list-style: none;
margin: 0;
padding: 0
}
</style>
</head>
<body>
<nav id="menu">
<ul>
<li><a href="#">Lorem.</a>
</li>
<li><a href="#">Repellendus.</a>
<ul>
<li><a href="#">Lorem.</a>
</li>
<li><a href="#">Voluptate.</a>
</li>
<li><a href="#">Nesciunt.</a>
</li>
</ul>
</li>
<li><a href="#">Fugiat!</a>
</li>
<li><a href="#">Fuga.</a>
</li>
<li><a href="#">Ea.</a>
<ul>
<li><a href="#">Lorem.</a>
</li>
<li><a href="#">At.</a>
</li>
<li><a href="#">Ratione?</a>
</li>
<li><a href="#">Optio.</a>
<ul>
<li><a href="#">Lorem.</a>
</li>
<li><a href="#">Voluptas!</a>
</li>
<li><a href="#">Error?</a>
</li>
</ul>
</li>
<li><a href="#">Asperiores.</a>
</li>
</ul>
</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$menu = $('#menu').find('ul').find('li');
$menu.hover(function() {
$(this).children('ul').stop();
$(this).children('ul').slideDown();
}, function() {
$(this).children('ul').stop();
$(this).children('ul').slideUp();
});
});
</script>
</body>
</html>Avanzado: en archivos separados.
Html de ejemplo. Puedes llamarlo index.html
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<title>Menu desplegable con 2 niveles</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<nav id="menu">
<ul>
<li><a href="#">Lorem.</a>
</li>
<li><a href="#">Repellendus.</a>
<ul>
<li><a href="#">Lorem.</a>
</li>
<li><a href="#">Voluptate.</a>
</li>
<li><a href="#">Nesciunt.</a>
</li>
</ul>
</li>
<li><a href="#">Fugiat!</a>
</li>
<li><a href="#">Fuga.</a>
</li>
<li><a href="#">Ea.</a>
<ul>
<li><a href="#">Lorem.</a>
</li>
<li><a href="#">At.</a>
</li>
<li><a href="#">Ratione?</a>
</li>
<li><a href="#">Optio.</a>
<ul>
<li><a href="#">Lorem.</a>
</li>
<li><a href="#">Voluptas!</a>
</li>
<li><a href="#">Error?</a>
</li>
</ul>
</li>
<li><a href="#">Asperiores.</a>
</li>
</ul>
</li>
</ul>
</nav>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>El Sass.
$anchoCelda: 100px
$alturaCelda: 50px
$numElementos: 5
$colorNivel1: green
$colorNivel2: red
$colorNivel3: yellow
#menu
width: $anchoCelda * $numElementos
margin: 0 auto
>ul>li
float: left
a
display: block
width: $anchoCelda
height: $alturaCelda
background: $colorNivel1
text-align: center
line-height: $alturaCelda
>ul
display: none
>li
position: relative
>a
background: $colorNivel2
>ul
position: absolute
left: $anchoCelda
top: 0
display: none
a
background: $colorNivel3
ul
list-style: none
margin: 0
padding: 0O en CSS puro.
#menu {
width: 500px;
margin: 0 auto
}
#menu>ul>li {
float: left
}
#menu>ul>li a {
display: block;
width: 100px;
height: 50px;
background: green;
text-align: center;
line-height: 50px
}
#menu>ul>li>ul {
display: none
}
#menu>ul>li>ul>li {
position: relative
}
#menu>ul>li>ul>li>a {
background: red
}
#menu>ul>li>ul>li>ul {
position: absolute;
left: 100px;
top: 0;
display: none
}
#menu>ul>li>ul>li>ul a {
background: #ff0
}
#menu ul {
list-style: none;
margin: 0;
padding: 0
}Y por último el JQuery.
$(document).ready(function() {
$menu = $('#menu').find('ul').find('li');
$menu.hover(function() {
$(this).children('ul').stop();
$(this).children('ul').slideDown();
}, function() {
$(this).children('ul').stop();
$(this).children('ul').slideUp();
});
});Actualización
Menú responsive completo con botón hamburguesa.
{{ comments.length }} comentarios