jQuery ul label drop-down menu demo code_jquery

This is the content of the menu. Use the ul tag to implement the menu:

Copy the code The code is as follows:

• Menu 1
  
  
  
  • Submenu 1
  
  
  • Submenu 2
    
    • Submenu 7
    
    
  
  
  • Submenu 3
  
  
  
  


• Menu 2
  
  
  
  • Submenu 4
  
  < li>Submenu 5
  
  • Submenu 6
  
  

This is the CSS control code:

Copy code The code is as follows:

ul,ol,li{list-style:none;padding: 0px;margin:0px;}
#menu *{line-height:30px;}
#menu a{
text-decoration:none;
display:block;
}
#menu ul{
text-align:left;
background:#333;
}
#menu .arrow{ /* Small arrow on the right side of the menu item*/
float: right;
padding-right:5px;
}
#menu>ul{height:30px;} /* Maintain the height of the top menu bar even if there are no menu items. */
/* First level menu*/
#menu>ul>li{
text-align:center;
display:inline-block;
width:80px;
}
#menu>ul>li>a{color:#fff;}
#menu>ul>li:hover{background:#666;}
/* Drop-down menu bar*/
#menu>ul>li ul{
display:none;
width:150px;
position:absolute;
background:#c1cd94;
box-shadow:2px 2px 2px #000 ;
-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #123;
}
/* Menu items of drop-down menu*/
#menu>ul>li>ul li{padding-left:5px; position:relative;}
#menu>ul>li>ul li>a{color:#000;}
#menu> ul>li>ul li:hover{background:#d3dbb3;}
/* Positioning of menu items at level three and below*/
#menu>ul>li>ul>li ul{left:150px; top:0px;}

This is the JS control code:

Copy code The code is as follows:

$(document).ready(function()
{
/* Menu initialization*/
$('#menu>ul>li>ul').find ('li:has(ul:not(:empty))>a').append(">"); // For those with submenus Add '>' symbol to menu items
$("#menu>ul>li").bind('mouseover',function() // Mouseover operation for top-level menu items
{
$( this).children('ul').slideDown('fast');
}).bind('mouseleave',function() // Mouse out operation for top menu items
{
$( this).children('ul').slideUp('fast');
});
$('#menu>ul>li>ul li').bind('mouseover',function() //Mouse-in operation for submenu
{
$(this).children('ul').slideDown('fast');
}).bind('mouseleave',function() / / Mouse out operation of submenu
{
$(this).children('ul').slideUp('fast');
});
});