Simple implementation of the Pull-down menu using jquery

Jquery is a lightweight framework that individuals think is very handy and today write a very simple example to implement the Drop-down menu function;

First of all, be sure to quote the Jquery.js version on the page is not limited;

Next, post the =====================html:

The code is as follows:
<div class= "Header_menu" >
<ul>
<li class= "Menuli" id= "Xtgl_menu" > System Management </li>
<li class= "Menuli" id= "ggsq_menu" > Dry pipe Service </li>
<li class= "Menuli" id= "Bhz_menu" > Protection station </li>
<li class= "Menuli" id= "mcjy_menu" > Wood inspection </li>
<li class= "Menuli" id= "Slgh_menu" > Forest protecting </li>
</ul>
</div>
<div class= "Display Movediv" id= "Slgh_menu_div" >
<ul>
<li class= "Redli" > Attendance Management </li>
<li class= "Redli" > Patrol Management </li>
<li class= "Redli" > On-site forensics </li>
<li class= "Redli" > Problem Disposal </li>
</ul>
</div>
<div class= "Display Movediv" id= "Mcjy_menu_div" >
<ul>
<li class= "Redli" > Position monitoring </li>
<li class= "Redli" > Inspection Management </li>
</ul>
</div>
<div class= "Display Movediv" id= "Bhz_menu_div" >
<ul>
<li class= "Redli" > Attendance Management </li>
<li class= "Redli" > Regulatory Information </li>
</ul>
</div>
<div class= "Display Movediv" id= "Ggsq_menu_div" >
<ul>
<li class= "Redli" > Attendance Management </li>
<li class= "Redli" > Regulatory Information </li>
</ul>
</div>
<div class= "Display Movediv" id= "Xtgl_menu_div" >
<ul>
<li class= "Redli" > Rights Management </li>
<li class= "Redli" > Equipment Management </li>
</ul>
</div>

===========================CSS Style:

The code is as follows:
/** Head Menu **/
. header_menu{
Float:right;
width:50%;
height:100%;
Cursor:pointer;
}
. Header_menu ul{
List-style:none;
height:100%;
}
. Header_menu ul li{
Float:right;
width:20%;
Color:white;
font-size:14px;
padding-top:55px;
Font-weight:bold;
}
. display{
Display:none;
}
. Display ul{
List-style:none;
width:100px;
}
. Display UL li{
padding-top:10px;
padding-bottom:5px;
padding-left:5px;
Cursor:pointer;
font-size:14px;
}
. movediv{
position:fixed;
left:0px;
top:0px;
font-size:14px;
White
border:1px solid white;
}
. redcolor{
#a0c9e6;
}

=======================js Script

The code is as follows:
$ (function () {
Menu Binding Events
Initmenulistener ();
Drop-down Menu Binding Event
Initsubmenuhover ();
Drop down menu Color change
Initsubmenulihover ();
});
/**
* Header menu bindings slide over events
*/
function Initmenulistener () {
$ (". Menuli"). Hover (function () {
var Hidedivid = $ (this). attr ("id") + "_div";
Get the location of the menu
var left = $ (this). Offset (). Left;
var top = $ (this). Offset (). Top;
var height = $ (this). Outerheight ();//outerheight is to get height, including inner margin, height is also get height, but only text height is included
$ ("#" + Hidedivid). Show ();
$ ("#" + hidedivid). CSS ("left", left);
$ ("#" + hidedivid). CSS ("top", top + height);
}, function () {
Hide the original menu
$ (". Display"). Hide ();
});
}
/**
* Drop-down Menu Binding Event
*/
function Initsubmenuhover () {
$ (". Display"). Hover (function () {
$ (this). Show ();
}, function () {
$ (this). Hide ();
});
}
/**
* Drop down menu to change color
*/
function Initsubmenulihover () {
$ (". Redli"). Hover (function () {
$ (this). addclass ("Redcolor");
}, function () {
$ (this). Removeclass ("Redcolor");
});
}

The effect is as follows:

Small partners in the use of their own landscaping, the free expansion can be used in their own projects, I here is simply done a little style just.