导航移上高亮并且显示二级菜单,移除后恢复:
html
<div class="nav">
<ul>
<li>语文
<ul>
<li>读课文</li>
<li>默写</li>
<li>诗歌大赛</li>
</ul>
</li>
<li>数学
<ul>
<li>速算</li>
<li>应用题讨论</li>
<li>写试卷</li>
</ul>
</li>
<li >科技
<ul>
<li>博物馆参观</li>
<li>头脑风暴</li>
</ul>
</li>
<li>美术
<ul>
<li>速写</li>
<li>人体模特表演</li>
<li>临摹</li>
</ul>
</li>
</ul>
</div>
css
.nav ul{width: 300px;}
.nav > ul > li{ background-color: #333333; color: #eee; list-style-type: none;}
.nav .on{ background-color: #dcdcdc; color: #999; }
.nav >ul > li >ul{display: none;}
.navchilder{ color: #f00; text-decoration: underline; }
jquery
$('.nav>ul>li').mouseover(function(){
$(this).addClass('on').children().show().parent().siblings().removeClass('on').end().siblings().children().hide();
});//移上本身添加on类名,下级显示,父级的同辈元素删除on类,返回最原始,同辈元素的子元素隐藏
$('.nav>ul>li').mouseout(function(){
$(this).removeClass('on').children().hide();
}); //移出删除原色上的on类,子元素隐藏
$('.nav>ul>li>ul>li').hover(function(){
$(this).addClass('navchilder').siblings().removeClass('navchilder');
}) //子元素移上显示当前高亮