商品顶部下拉菜单
<style> /*阿里图库*/ @font-face {font-family: 'iconfont'; src: url('iconfont/iconfont.eot'); /* IE9*/ src: url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont/iconfont.woff') format('woff'), /* chrome、firefox */ url('iconfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ }.iconfont{ font-family:"iconfont" !important; font-size:20px; font-style:normal; color: #fff; padding-right:10px; }
}*{ margin:0; padding:0;}a{text-decoration: none;}body{margin: 0;padding: 0;}#logo{width:100%;height:50px;background: #000;margin-top:100px;z-index: 12} #logo ul{width:1000px;height: 50px;margin: 0 auto;} #logo ul li{height:50px;list-style: none;float:left;color: #fff;font-size:16px;font-family:'微软雅黑';line-height: 50px;} #logo ul li a{color:#fff;text-decoration: none;display: block;padding: 0 30px;}/*#logo ul li a:hover{ background: #ff6699;}*/ #logo ul li.first{width:200px;/*background:#ff6699;*//*text-indent: 70px;*/text-align:center;} .on{background: #ff6699;} #logo ul li.first .menu{width:1000px;height: 300px;background:#fff;position:absolute;/*绝对定位*/display: none;/*显示隐藏*/box-shadow: 0px 0px 15px #000;/*图层阴影*/z-index: 1 } /*#logo ul li.first:hover .menu{display: block;}*/ #logo ul li .menu .content-l a,#logo ul li .menu .content-b a,#logo ul li .menu .content-r a{ text-decoration: none;font-size: 14px; color:#000;border-bottom:2px solid #000; padding-left: 0} #logo ul li .menu .content-l,#logo ul li .menu .content-b,#logo ul li .menu .content-r{float:left;/*margin: 0 30px;*/margin-left: 60px;width:250px; height:300px;text-align:left;} #logo ul li .menu .content-l .electrical,#logo ul li .menu .content-b .electrical,#logo ul li .menu .content-r .electrical{ width:100%;min-height:75px;text-align: left;display: inline-block;text-indent: 0;padding-left:0;border-bottom:1px solid #ddd;} #logo ul li .menu .content-l .electrical li,#logo ul li .menu .content-b .electrical li,#logo ul li .menu .content-r .electrical li{list-style: none;float: left;margin: 0 5px; font-size:12px;color:#ddd;text-indent: 0;height:25px; } </style>
<body>
<div id="logo">
<ul>
<li class="first on"><font class="iconfont"></font>全部礼物分类
<div class="menu">
<div class="content-l">
<a href="#">小家电</a>
<ul class="electrical">
<li>3C配件</li>
<li>厨房电器</li>
<li>生活家电</li>
<li>影音电器</li>
<li>护理按摩</li>
<li>灯具</li>
</ul>
<a href="#">零食商品</a>
<ul class="electrical">
<li>3C配件</li>
<li>厨房电器</li>
<li>生活家电</li>
<li>影音电器</li>
<li>护理按摩</li>
<li>灯具</li>
</ul>
</div>
<div class="content-b">
<a href="#">厨具</a>
<ul class="electrical">
<li>3C配件</li>
<li>厨房电器</li>
<li>生活家电</li>
<li>影音电器</li>
<li>护理按摩</li>
<li>灯具</li>
</ul>
<a href="#">幼儿</a>
<ul class="electrical">
<li>3C配件</li>
<li>厨房电器</li>
<li>生活家电</li>
<li>影音电器</li>
<li>护理按摩</li>
<li>灯具</li>
</ul>
</div>
<div class="content-r">
<a href="#">家具用品</a>
<ul class="electrical">
<li>3C配件</li>
<li>厨房电器</li>
<li>生活家电</li>
<li>影音电器</li>
<li>护理按摩</li>
<li>灯具</li>
</ul>
<a href="#">母婴</a>
<ul class="electrical">
<li>3C配件</li>
<li>厨房电器</li>
<li>生活家电</li>
<li>影音电器</li>
<li>护理按摩</li>
<li>灯具</li>
</ul>
</div>
</div>
</li>
<li><a href="#">首页</a></li>
<li><a href="#">节日礼物</a></li>
<li><a href="#">生日礼物</a></li>
<li><a href="#">蛋糕</a></li>
<li><a href="#">个性定制</a></li>
<li><a href="#">鲜花</a></li>
</ul
</div>
<img src="image/01.png">
<script type="text/javascript" src="js/jquery.js"></script>
<script >
$(function(){
$('#logo ul').not('.electrical').children('li').not('.first').hover(function () {
$(this).addClass('on');
},function () {
$(this).removeClass('on');
})
$("#logo ul li.first").hover(function(){
//当鼠标移动到上面时
//.find查找
//.slideDown慢慢的向下展开
//.stop停止之前所有的动画
$(this).find(".menu").stop(true,true).slideDown(1000);
},function(){
////当鼠标移开后
$(this).find(".menu").slideUp();
});
})
</script>
</body>
</html>
浙公网安备 33010602011771号