jquery实现二级菜单

<div class="box">
<ul class="menu">
<li>
<a href="#none">衬衫</a>
<div class="level2" style="display:none;background:green;">
<div><a href="#none">短袖衬衫</a></div>
<div><a href="#none">长袖衬衫</a></div>
<div><a href="#none">短袖T恤</a></div>
<div><a href="#none">长袖T恤</a></div>
</div>
</li>
<li>
<a href="#none">卫衣</a>
<div class="level2" style="display: none; background: #747b38;">
<div><a href="#none">开襟卫衣</a></div>
<div><a href="#none">套头卫衣</a></div>
<div><a href="#none">运动卫衣</a></div>
<div><a href="#none">童装卫衣</a></div>
</div>
</li>
<li>
<a href="#none">裤子</a>
<div class="level2" style="display: none; background: #e041c0;">
<div><a href="#none">短裤</a></div>
<div><a href="#none">休闲裤</a></div>
<div><a href="#none">牛仔裤</a></div>
<div><a href="#none">免烫卡其裤</a></div>
</div>
</li>
</ul>
</div>
<div class="levelmain" style="display:block;">
<div><a href="#none">正常显示</a></div>
<div><a href="#none">正常显示</a></div>
<div><a href="#none">正常显示</a></div>
<div><a href="#none">正常显示</a></div>
</div>

$(function () {
$(".box .menu>li").hover(function () {//实现一级菜单鼠标移动，二级菜单显示事件
$(this).css("background", "green").find('.level2').show().parent().siblings().children('a').css("background", "").next().hide();
},
function () {
$(this).css("background", "").find('.level2').hide();
}
);
});

<div class="box">
<ul class="menu1">
<li>
<a href="#none">衬衫</a>
</li>
<li>
<a href="#none">卫衣</a>

</li>
<li>
<a href="#none">裤子</a>
</li>
</ul>
</div>

<div class="levelmain" style="display:block;">
<div><a href="#none">正常显示</a></div>
<div><a href="#none">正常显示</a></div>
<div><a href="#none">正常显示</a></div>
<div><a href="#none">正常显示</a></div>
</div>
<div class="level" style="display:none;">
<div class="level2" style=" background:green;">
<div><a href="#none">短袖衬衫</a></div>
<div><a href="#none">长袖衬衫</a></div>
<div><a href="#none">短袖T恤</a></div>
<div><a href="#none">长袖T恤</a></div>
</div>
<div class="level2" style="  background: #e041c0;">
<div><a href="#none">短裤</a></div>
<div><a href="#none">休闲裤</a></div>
<div><a href="#none">牛仔裤</a></div>
<div><a href="#none">免烫卡其裤</a></div>
</div>
<div class="level2" style=" background: #747b38;">
<div><a href="#none">开襟卫衣</a></div>
<div><a href="#none">套头卫衣</a></div>
<div><a href="#none">运动卫衣</a></div>
<div><a href="#none">童装卫衣</a></div>
</div>
</div>

$(function () {
$(".box .menu1>li").hover(function () {//实现一级菜单鼠标移动、二级菜单插入事件
var $level = $('.level>.level2').eq($(this).index()).clone();
$(this).css("background", "green").append($level).parent().siblings().children('a').css("background", "");
},
function () {
$(this).css("background", "").find('.level2').remove();
}
);
});