<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<TITLE>JQUERY+CSS implemented highlighting two-level menu effect 丨 Shijiazhuang carpet </title>
<style type= "Text/css" >
*{margin:0;padding:0}
body{font-size:14px;}
ul{margin:0; padding:0; list-style:none;}
A{text-decoration:none; color: #000;}
#wrap {position:relative; top:0px;width:876px; height:34px; line-height:34px; margin:0 Auto;}
Ul#menu li{float:left; display:block; width:92px;height:37px;line-height:37px;text-align:center;margin-right:2px;}
Ul#menu Li A:link{display:block;background: #EDEBEC; Font-size:14px;color: #333; width:92px;height:37px;line-height : 37px;}
Ul#menu li A:hover,.red{background: #CE070E!important;color: #FFF!important;}
/* Sub-menu */
Ul#menu Li Ul{position:absolute; top:37px;width:90px; display:none;border:1px #CE070E Solid;border-top:none; Background:skyblue;}
Ul#menu Li ul li{float:left;}
Ul#menu Li ul li a:link{width:90px;height:37px;line-height:37px;background: #FFF;}
Ul#menu Li ul li a:hover{color: #CE070E; Text-decoration:underline}
Ul#menu Li ul li{width:90px;height:37px;line-height:37px;float:left;}
</style>
<script language= "javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></ Script>
<script type= "Text/javascript" language= "JavaScript" >
$ (function () {
$ ("Ul#menu>li:has (UL)"). Hover (
function () {
$ (this). Children (' a '). addclass (' red '). End (). Find (' ul '). FadeIn (400);
},
function () {
$ (this). Children (' a '). Removeclass (' red '). End (). Find (' ul '). FadeOut (400);
}
);
});
</script>
<body>
<div id= "Wrap" >
<ul id= "Menu" >
<li><a href= "#" >CsrCode.Cn</a></li>
<li><a href= "#" > News page </a>
<ul>
<li><a href= "#" > Spotlight on Caesar </a></li>
<li><a href= "#" > Spotlight on Caesar </a></li>
<li><a href= "#" > Spotlight on Caesar </a></li>
</ul>
</li>
<li><a href= "#" > Product booking </a></li>
<li><a href= "#" > Help query </a>
<ul>
<li><a href= "#" > Web Effects </a> | </li>
<li><a href= "#" > Spotlight Caesar </a> | </li>
<li><a href= "#" > Spotlight Caesar </a> | </li>
<li><a href= "#" > Spotlight Caesar </a> | </li>
<li><a href= "#" > Spotlight Caesar </a> | </li>
<li><a href= "#" > Spotlight on Caesar </a></li>
</ul>
</li>
<li><a href= "#" > Membership Club </a></li>
<li><a href= "#" > Web Tutorials </a></li>
</ul>
</div>
</body>
<div style= "height:200px;" ></div><br> If the preview effect is not displayed, please refresh this page first ~ ~ ~ the required JS file: <a href= "/images/jquery.min.js" >jquery.min.js</ A><br>
JQUERY+CSS implemented highlighting with two-level menu effects selected