仿天猫顶部导航实现
玄夜、2019-02-27 15:39:29200<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>天猫tmall.com--理想生活上天猫</title>
</head>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" />
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;color: #999999;}
ul{list-style: none;}
.top{height: 35px;background: #F2F2F2;}
.topbar{height:35px;margin: 0 auto;line-height: 35px;width: 1200px;font-size: 12px;color: #999;}
.topbar .left{float: left;}
.left a{margin-right: 18px;}
.left a:hover{color: red;}
.topbar .right{float: right;}
.right li{float: left;position: relative;padding: 0 10px;}
.right li:hover{color: red;}
.right li:hover .taobao{display:block;}
.right li i{margin: 0 5px;color:red;}
.right .taobao{border: 1px solid #ccc;border-top: none;position: absolute;left: 0;display:none;width: 95px;}
.taobao a{display:block;line-height:25px;margin: 0 10px;}
.container{height: 500px;width: 100%;background: url(2.png);margin-top: 100px;background-repeat: no-repeat;background-size: cover;}
.content{height: 500px;width: 1200px;margin: 0 auto;}
.content .menu{height: 500px;width: 200px;background: rgba(0,0,0,0.4);font-size: 15px;position: relative;}
.menu li{height: 31.2px;line-height: 30px;color: #FFFFFF;}
.menu li:hover{color: red;background: #FFFFFF;}
.menu li i{margin: 0 10px;}
.menu-content{height: 500px;width:900px;background: #FFFFFF;position: absolute;top: 0;left: 200px;color: #000000;font-size: 13px;}
.menu-content div{float: left;}
.menu-left{float:left;padding:5px 20px;}
.menu-right{float:left;padding:10px;border-bottom: 1px dashed #CCCCCC;line-height: 20px;}
.menu-right a{margin-right: 20px;}
.content-right{height: 500px;width: 200px;background: #CCCCCC;}
</style>
<body>
<!--顶部导航-->
<div class="top">
<div class="topbar">
<div class="left">
<a href="">喵，欢迎来天猫</a>
<a href="">请登录</a>
<a href="">免费注册</a>
</div>
<div class="right">
<ul>
<li>我的淘宝 <i class="fa fa-angle-down"></i>
<div class="taobao">
<a href="">已买到的宝贝</a>
<a href="">已卖出的宝贝</a>
</div>
</li>
<li><i class="fa fa-shopping-cart"></i>购物车0件</li>
<li>收藏夹<i class="fa fa-angle-down"></i>
<div class="taobao" style="width: 80px;">
<a href="">收藏的宝贝</a>
<a href="">收藏的店铺</a>
</div>
</li>
<li>|</li>
<li><i class="fa fa-phone"></i>手机版</li>
<li>淘宝网</li>
<li>商家支持 <i class="fa fa-angle-down"></i></li>
<li><i class="fa fa-wechat"></i>网站导航</li>
</ul>
</div>
</div>
</div>
<!--轮播菜单-->
<div class="container">
<div class="content">
<ul class="menu">
<li><i class="fa fa-heart-o"></i>女装/内衣
<div class="menu-content">
<div style="width:700px;" class="content-left">
<div>
<p class="menu-left">当季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<a href="">女装新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲裤</a>
<a href="">牛仔裤</a><br />
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</p>
</div>
<div>
<p class="menu-left">当季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<a href="">女装新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲裤</a>
<a href="">牛仔裤</a><br />
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</p>
</div>
<div>
<p class="menu-left">当季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<a href="">女装新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲裤</a>
<a href="">牛仔裤</a><br />
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</p>
</div>
<div>
<p class="menu-left">当季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<a href="">女装新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲裤</a>
<a href="">牛仔裤</a><br />
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</p>
</div>
<div>
<p class="menu-left">当季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<a href="">女装新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲裤</a>
<a href="">牛仔裤</a><br />
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</p>
</div>
<div>
<p class="menu-left">当季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<a href="">女装新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲裤</a>
<a href="">牛仔裤</a><br />
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</p>
</div>
<div>
<p class="menu-left">当季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<a href="">女装新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲裤</a>
<a href="">牛仔裤</a><br />
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</p>
</div>
<div>
<p class="menu-left">当季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<a href="">女装新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲裤</a>
<a href="">牛仔裤</a><br />
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</p>
</div>
</div>
<div class="content-right"></div>
</div>
</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
<li><i class="fa fa-heart-o"></i>女装/内衣</li>
</ul>
</div>
</div>
</body>
</html>