This is the content of the menu, with the UL tag to implement the menu:
Copy Code code as follows:
<div id= "Menu" >
<ul>
<li><a href= "" > Menu one </a>
<ul>
<li><a href= "" > submenu 1</a></li>
<li><a href= "" > submenu 2</a>
<ul><li><a href= "" > submenu 7</a></li></ul>
</li>
<li><a href= "" > submenu 3</a></li>
</ul>
</li>
<li><a href= "" > Menu two </a>
<ul>
<li><a href= "" > submenu 4</a></li>
<li><a href= "" > submenu 5</a></li>
<li><a href= "" > submenu 6</a></li>
</ul>
</li>
</ul>
</div>
This is the CSS control code:
Copy Code code 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{/* The right small arrow of the menu item * *
Float:right;
padding-right:5px;
}
#menu >ul{height:30px}/* Maintains the height of the top-level menu bar even if there are no menu items. */
/* 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 item for pull-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;}
/* Three level and below the location of the menu items * *
#menu >ul>li>ul>li ul{left:150px; top:0px;}
This is the control code of JS:
Copy Code code as follows:
$ (document). Ready (function ()
{
/* Menu Initialization */
$ (' #menu >ul> Li>ul '). Find (' Li:has (Ul:not (: Empty)) >a '). Append ("<span class= ' arrow ' >></span>"); Add the ' > ' Symbol
$ ("#menu >ul>li") to a menu item with a submenu. Bind (' MouseOver ', function ()//top-level menu item mouse move in
{
$ (this). Chil dren (' ul '). Slidedown (' fast ');
}). bind (' MouseLeave ', function ()//The mouse move out of the top-level menu item
{
$ (this). Children (' ul '). Slideup (' fast ');
});
$ (' #menu >ul>li>ul li '). bind (' MouseOver ', function ()//submenu mouse move in action
{
$ (this). Children (' ul '). Slidedown (' fast ');
}). bind (' MouseLeave ', function ()//submenu mouse move out operation
{
$ (this). Children (' ul '). Slideup (' fast ');
});
});