1. Add the hover effect to the menu item
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Style type = "text/css">
Ul
{
Width: 200px;
}
Ul li ul
{
List-style-type: none;
Width: 200px;
Margin: 5px;
}
A
{
Display: block;
Border: 1px solid # fff;
Background-color: # 00f;
Color: # fff;
Text-decoration: none;
}
Li
{
List-style-type: none;
}
. Hover
{
Background-color: #000;
}
</Style>
<Script src = "../Scripts/jquery-1.4.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('A'). hover (function (){
$ (This). addClass ('hover ');
}, Function (){
$ (This). removeClass ('hover ');
});
});
</Script>
</Head>
<Body>
<Div>
<Ul>
<Li> <a href = "#"> Books </a>
<Ul>
<Li> <a href = "#"> Web Development </a> </li>
<Li> <a href = "#"> BI Development </a> </li>
<Li> <a href = "#"> Web Test </a> </li>
</Ul>
</Li>
</Ul>
</Div>
</Body>
</Html>
2. Fold-over menu
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Style type = "text/css">
. Menu
{
Width: 200px;
Background-color: # 0ff;
Padding: 5px;
Margin: 1px;
}
. Menuitems
{
Display: none;
Background-color: Red;
}
A
{
Display: block;
Border: 1px soild # fff;
Text-decoration: none;
Color: # fff;
Padding: 10px;
}
. Menuitems a: hover
{
Background-color: #000;
}
Li
{
Display: inline;
}
Ul
{
Display: inline;
}
</Style>
<Script src = "../Scripts/jquery-1.4.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("P. Menu"). mouseout (function (){
$ ("Div. menuitems"). slideUp ('low ');
Certificate ('p'background .css ({'background-color ':''});
});
$ ('P. Menu '). mouseover (function (){
$ (This). next ('div. menuitems '). slideDown (500). siblings ('div. menuitems'). slideUp ("slow ");
Certificate (this).siblings().css ({'background-color ':''});
});
});
</Script>
</Head>
<Body>
<P class = "Menu"> Books </p>
<Div class = "menuitems">
<Ul>
<Li> <a href = "#"> Web Development </a> </li>
<Li> <a href = "#"> BI Development </a> </li>
<Li> <a href = "#"> Web Test </a> </li>
</Ul>
</Div>
<P class = "Menu"> Moive </p>
<Div class = "menuitems">
<Ul>
<Li> <a href = "#"> American Moive </a> </li>
<Li> <a href = "#"> Chinese Moive </a> </li>
<Li> <a href = "#"> HongKong Moive </a> </li>
</Ul>
</Div>
</Body>
</Html>