导航条——
<header>
<div class="header-wrap">
<div class="header-left">
<ul>
<li>
<a href="">小米官网</a>
</li>
<li class="space">|</li>
<li>
<a href="">小米商城</a>
</li>
<li class="space">|</li>
<li>
<a href="">MIUI</a>
</li>
<li class="space">|</li>
<li>
<a href="">IoT</a>
</li>
<li class="space">|</li>
<li>
<a href="">云服务</a>
</li>
<li class="space">|</li>
<li>
<a href="">天星数科</a>
</li>
<li class="space">|</li>
<li>
<a href="">有品</a>
</li>
<li class="space">|</li>
<li>
<a href="">小爱开放平台</a>
</li>
<li class="space">|</li>
<li>
<a href="">企业团购</a>
</li>
<li class="space">|</li>
<li>
<a href="">资质证照</a>
</li>
<li class="space">|</li>
<li>
<a href="">协议规则</a>
</li>
<li class="space">|</li>
<li>
<a href="">下载app</a>
<i class="triangle"></i>
<div class="download">
<img src="./download.png">
<p style="font-size:14px ;">小米商城APP</p>
</div>
</li>
<li class="space">|</li>
<li>
<a href="">Selec Location</a>
</li>
</ul>
</div>
<div class="header-right">
<ul>
<li>
<a href="">登录</a>
</li>
<li class="space">|</li>
<li>
<a href="">注册</a>
</li>
<li class="space">|</li>
<li>
<a href="">消息通知</a>
</li>
<li class="space">|</li>
<li class="cart">
<a href="">
<i class="iconfont icon-gouwuche"></i>
购物车(0)
</a>
<div class="cart-menu">
<span>购物车中还没有商品,赶紧选购吧!</span>
</div>
</li>
</ul>
</div>
</div>
</header>
CSS样式——
/* 头部开始 */
header{
width: 100%;
height: 40px;
background-color: #333;
}
.header-wrap{
width: 1226px;
height: 40px;
margin: 0 auto;
line-height: 40px;
font-size: 12px;
}
.header-wrap a{
color: #b0b0b0;
}
.header-left ul>li:hover>a{
color: #fff;
}
.header-right li:not(.cart):hover>a{
color: #fff;
}
.header-left{
float: left;
}
header li{
position: relative;
padding-left: 2.5px;
padding-right: 2.5px;
}
.header-left li{
float: left;
}
/* 二维码 */
.download{
z-index: 20;
width: 124px;
height: 0;
overflow: hidden;
transition: all .7s;
text-align: center;
line-height: 28px;
background-color: #fff;
box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
position: absolute;
top: 40px;
left: 50%;
margin-left: -62px;
}
.download>img{
width: 90px;
margin: 18px 15px 12px;
}
li:hover>.download{
height: 160px;
}
/* 三角形 */
.triangle{
width: 0px;
height: 10px;
border: 10px solid;
border-color:transparent transparent #fff transparent;
position: absolute;
right: 10px;
top: 10px;
visibility: hidden;
}
.header-left>ul>li:hover>i{
visibility: visible;
}
.header-right{
float: right;
}
.header-right li{
float: left;
}
/* 购物车 */
.cart{
width: 120px;
height: 40px;
background-color: rgba(96, 96, 96,0.3);
text-align: center;
position: relative;
}
.cart i{
margin-right: 4px;
}
.cart:hover>a{
color:#ff6700;
}
.cart:hover{
background-color: #fff;
}
.cart-menu{
z-index: 10;
width: 316px;
height: 0;
overflow: hidden;
text-align: center;
position: absolute;
line-height:80px ;
top: 40px;
right: 0;
background-color: #fff;
box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
transition: all .7s;
}
.cart:hover .cart-menu{
height: 80px;
}
/* 头部结束 */
如有错误,欢迎指正!