abstract：动画效果体现在“我的淘宝”和“收藏夹”两个元素上<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, init
动画效果体现在“我的淘宝”和“收藏夹”两个元素上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>淘宝导航</title>
<!-- Latest compiled and minified CSS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
*{padding: 0%;margin: 0%}
li{list-style:none;}
.clear{clear: both;}
.header{background-color:#f5f5f5;width:100%;}
.header_box{width: 1200px;margin:0px auto;line-height: 35px;}
.header_box_left{float: left;}
.header_box_right{float: right;}
.header_box a:hover{color:#FF5000;}
.header_box a {width:85px;text-decoration: none;color: #3C3C3C;font-size: 12px;text-align: center;display: inline-block;height:40px;}
.header_box_a{position: relative;}
.header_box_a ul {border: 1px solid #f5f5f5;display:none;border-top:none;}
.header_box_a:hover{background-color:white;}
/* .header_box_a:hover ul{display:block;position: absolute;width: 85px;} */
.header_box_a ul li{color:#6c6c6c;height: 30px;line-height: 30px;text-align: left;padding: 0px 3px;margin:3px 3px;}
.header_box_a ul li:hover{background-color: #f5f5f5;}
</style>
</head>
<body>
<script>
$(document).ready(function () {
$("#mytb").hover(function () {
// over
$("#mytb ul").animate({opacity:'show'},2000);
$("#mytb ul").css({"display":"block","position":"absolute","width":"85px"});
}, function () {
// out
$("#mytb ul").animate({opacity:'hide'});
// $("#mytb ul").css({"border":"1px solid #f5f5f5","display":"none","border-top":"none"});
}
);
$("#favorites").hover(function () {
// over
$("#favorites ul").animate({opacity:'show'},2000);
$("#favorites ul").css({"display":"block","position":"absolute","width":"85px"});
}, function () {
// out
$("#favorites ul").animate({opacity:'hide'});
// $("#mytb ul").css({"border":"1px solid #f5f5f5","display":"none","border-top":"none"});
}
);
});
</script>
<div class="header">
<div class="header_box">
<div class="header_box_left">
<a href="" class="header_box_a">中国大陆 <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<a href="" style="color:#FF5000;">亲，请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div class="header_box_right">
<a href="" class="header_box_a" id="mytb">我的淘宝 <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href="" class="header_box_a"><i class="fa fa-shopping-cart" aria-hidden="true" style="color:#FF5000;"></i> 购物车 <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<a href="" class="header_box_a" id="favorites"><i class="fa fa-star" aria-hidden="true"></i> 收藏夹 <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href="">商品分类</a>
<span>|</span>
<a href="" class="header_box_a">卖家中心 <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<a href="" class="header_box_a">联系客服 <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<a href="" class="header_box_a"><i class="fa fa-bars" aria-hidden="true" style="color:#FF5000;"></i> 网站导航 <i class="fa fa-angle-down" aria-hidden="true"></i></a>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
