Я хочу создать многоуровневое меню с помощью jQuery. Я уже написал код. Вы можете увидеть демо here. Все это прекрасно работает. Но я хочу сделать многоуровневое выпадающее меню динамически.Многоуровневое раскрывающееся меню с использованием JQuery
Script
$('ul#menu > li').hover(function(){
//$('#drop' , this).css('display','block');
$('.drop' , this).delay(20).slideDown(200);
}, function(){
$('.drop' , this).delay(20).slideUp(200);
});
HTML
<ul id="menu">
<li><a href="#">Home</a>
<ul class="drop">
<li><a href="#">About us</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">About us</a></li>
</ul>
</li>
<li><a href="#">about</a>
<ul class="drop">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</li>
</ul>
CSS
ul#menu
{
margin:0;
padding:0;
}
ul#menu > li
{
list-style:none;
float:left;
margin:0;
padding:0;
position:relative;
}
ul#menu a
{
text-decoration:none;
color:#fff;
background:red;
display:block;
padding:10px;
}
ul#menu > li ul.drop
{
margin:0;
padding:0;
width:150px;
position:absolute;
display:none;
}
ul#menu > li ul.drop ul
{
margin:0;
padding:0;
width:150px;
position:absolute;
display:none;
left:150px;
top:0;
}
ul#menu > li ul li
{
margin:0;
padding:0;
list-style:none;
position:relative;
}
Спасибо, для вышеуказанного раствора. Но ваше решение работает только для 2 уровней элементов меню. т.е. родитель и ребенок. Можете ли вы сказать, как я могу использовать меню бесконечного уровня? – Vishal