这是Html部分
<div id="top-bar-warp">
<div class="top-bar w">
<ul class="top-bar-left">
<li><a href="#">小米官网</a></li>
<li class="line">|</li>
<li><a href="#">小米商城</a></li>
<li class="line">|</li>
<li><a href="#">MIUI</a></li>
<li class="line">|</li>
<li><a href="#">LoT</a></li>
<li class="line">|</li>
<li><a href="#">云服务</a></li>
<li class="line">|</li>
<li><a href="#">天星数科</a></li>
<li class="line">|</li>
<li><a href="#">小爱开放平台</a></li>
<li class="line">|</li>
<li><a href="#">企业团购</a></li>
<li class="line">|</li>
<li><a href="#">资质证照</a></li>
<li class="line">|</li>
<li><a href="#">协议规则</a></li>
<li class="line">|</li>
<li>
<a href="#" class="app-a">下载app
<div class="app-wrap">
<div class="QRcode">
<img src="./img/download.png" alt="" />
<p>小米商城app</p>
</div>
</div>
</a>
</li>
<li class="line">|</li>
<li><a href="#">Select Location</a></li>
</ul>
<ol class="top-bar-right">
<li><a href="#">登录</a></li>
<li class="line">|</li>
<li><a href="#">注册</a></li>
<li class="line">|</li>
<li><a href="#">消息通知</a></li>
<li class="line">|</li>
<li><a href="#">购物车</a></li>
</ol>
</div>
</div>
对应的是css部分
/* 设置顶部导航 */
#top-bar-warp {
width: 100%;
height: 40px;
background-color: #333333;
}
.top-bar>.top-bar-left,
.top-bar-left>li,
.top-bar-right>li {
float: left;
}
.top-bar {
line-height: 40px;
font-size: 12px;
}
.top-bar>.top-bar-right {
float: right;
}
.top-bar .line {
color: #424242;
margin: 0 4px;
}
.top-bar li:hover a {
color: white;
}
/* 设置二维码 */
.app-a {
position: relative;
display: block;
}
.app-a:hover>.app-wrap {
display: block;
}
.app-wrap {
display: none;
width: 124px;
height: 148px;
background-color: white;
position: absolute;
left: -38px;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
z-index: 999;
}
.QRcode {
position: absolute;
width: 90px;
left: 0;
right: 0;
margin: 10px auto;
}
.QRcode img {
width: 90px;
}
.QRcode>p {
color: black;
font-size: 14px;
line-height: 1.5;
}
.app-wrap::before {
content: '';
width: 0;
border: 8px solid white;
border-color: transparent transparent white transparent;
border-top: none;
/* 定位小箭头的位置 */
position: absolute;
top: -8px;
left: 0px;
right: 0px;
margin: 0 auto;
}
这个是效果图