<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿爱淘宝分类伸缩jQuery导航 - 网页模板</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('.navRight li').mouseenter(function(){
$(this).children('span').css('transform','rotate(135deg)');
}).mouseleave(function(){
$(this).children('span').css('transform','rotate(-45deg)');
})
$('.fenlei ul li').mouseenter(function(){
$(this).stop().animate({'height':'289px'},300).siblings().stop().animate({'height':'44px'},300);
$(this).siblings().css('background','#F5F5F5');
$('.fenleiright').fadeTo(0,0.8).stop().animate({'width':'289px'},300);
}).mouseleave(function(){
$('.fenlei ul li').stop().animate({'height':'79px'},300)
$(this).siblings().css('background','#ffffff');
});
$('.navLeft').mouseleave(function(){
$('.fenleiright').stop().animate({'width':'0px'},300);
})
})
</script>
</head>
<body>
<div id="navOut">
<div class="nav">
<div class="navLeft">
<p>商品类目</p>
<div class="fenlei">
<ul>
<li>
<dl class="fenleiLeft">
<dt>男人</dt>
<dd>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
<a href="http://www.moobnn.com">网页模板</a>
</dd>
</dl>
</li>
<li>
<dl class="fenleiLeft">
<dt>美食</dt>
<dd>
<a href="http://www.moobnn.com">男鞋</a><a href="http://www.moobnn.com">男裤</a>
<a href="http://www.moobnn.com">手表</a><a href="http://www.moobnn.com">男卫衣</a>
<a href="http://www.moobnn.com">nb男鞋</a><a href="http://www.moobnn.com">打底衫</a>
<a href="http://www.moobnn.com">拖鞋</a><a href="http://www.moobnn.com">睡衣</a>
<a href="http://www.moobnn.com">男运动鞋</a><a href="http://www.moobnn.com">山地车</a>
<a href="http://www.moobnn.com">男皮带</a>
<a href="http://www.moobnn.com">运动裤</a><a href="http://www.moobnn.com">男棉裤</a>
<a href="http://www.moobnn.com">以纯男T恤包</a><a href="http://www.moobnn.com">情侣装</a>
<a href="http://www.moobnn.com">男保暖裤</a><a href="http://www.moobnn.com">运动鞋</a>
<a href="http://www.moobnn.com">男乔丹4代跑鞋</a>
<a href="http://www.moobnn.com">腰带</a><a href="http://www.moobnn.com">男旅行箱</a>
<a href="http://www.moobnn.com">气垫鞋</a><a href="http://www.moobnn.com">板鞋</a>
<a href="http://www.moobnn.com">温暖一家之主De冬日风采</a><a href="http://www.moobnn.com">羽绒服羽绒服中的小立领</a>
<a href="http://www.moobnn.com">皮衣潮男装</a>
</dd>
</dl>
</li>
<li>
<dl class="fenleiLeft">
<dt>女人</dt>
<dd>
<a href="http://www.moobnn.com">男鞋</a><a href="http://www.moobnn.com">男裤</a>
<a href="http://www.moobnn.com">手表</a><a href="http://www.moobnn.com">男卫衣</a>
<a href="http://www.moobnn.com">nb男鞋</a><a href="http://www.moobnn.com">打底衫</a>
<a href="http://www.moobnn.com">拖鞋</a><a href="http://www.moobnn.com">睡衣</a>
<a href="http://www.moobnn.com">男运动鞋</a><a href="http://www.moobnn.com">山地车</a>
<a href="http://www.moobnn.com">男皮带</a>
<a href="http://www.moobnn.com">运动裤</a><a href="http://www.moobnn.com">男棉裤</a>
<a href="http://www.moobnn.com">以纯男T恤包</a><a href="http://www.moobnn.com">情侣装</a>
<a href="http://www.moobnn.com">男保暖裤</a><a href="http://www.moobnn.com">运动鞋</a>
<a href="http://www.moobnn.com">男乔丹4代跑鞋</a>
<a href="http://www.moobnn.com">腰带</a><a href="http://www.moobnn.com">男旅行箱</a>
<a href="http://www.moobnn.com">气垫鞋</a><a href="http://www.moobnn.com">板鞋</a>
<a href="http://www.moobnn.com">温暖一家之主De冬日风采</a><a href="http://www.moobnn.com">羽绒服羽绒服中的小立领</a>
<a href="http://www.moobnn.com">皮衣潮男装</a>
</dd>
</dl>
</li>
<li>
<dl class="fenleiLeft">
<dt>数码</dt>
<dd>
<a href="http://www.moobnn.com">男鞋</a><a href="http://www.moobnn.com">男裤</a>
<a href="http://www.moobnn.com">手表</a><a href="http://www.moobnn.com">男卫衣</a>
<a href="http://www.moobnn.com">nb男鞋</a><a href="http://www.moobnn.com">打底衫</a>
<a href="http://www.moobnn.com">拖鞋</a><