模拟小米商城头部首页

这是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;
}

这个是效果图