在导航hover时在导航下面显示一个div块，但div块把导航撑开了是什么问题？

Question

<header>
        <ul>
            <li>
                <a href="#"> 小米商城 </a>
            </li>
            <li>
                <a href="http://www.miui.com/" target="_blank"> MUI </a>
            </li>
            <li>
                
                <a href="http://www.miliao.com/" target="_blank" > 米聊 </a>
                </li>
            <li>
                <a href="http://game.xiaomi.com/hy/index.html" target="_blank" > 游戏 </a>
                </li>
            <li>
                <a href="http://www.duokan.com/" target="_blank" > 多看阅读 </a>
                </li>
            <li>
                <a href="https://i.mi.com/" target="_blank" > 云服务 </a>
                </li>
            <li>
                <a href="http://www.mi.com/c/appdownload/" target="_blank" > 小米网移动版 </a>
                </li>
            <li>
                <a href="http://static.mi.com/feedback/" target="_blank" > 问题反馈 </a>
            </li>
            <li>
                <a href="#"> Select Region </a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="https://account.xiaomi.com" target="_blank" >登录</a>
            </li>
            <li>
                <a href="https://account.xiaomi.com/pass/register" target="_blank" >注册</a>
            </li>
            <li>
                <a href="http://static.mi.com/cart/" target="_blank" class="shopping-cart" > <i class = "fa fa-shopping-cart fa-lg" aria-hidden = "true" ></i>购物车（0）</a>
                <div class="shopping-hover">
                    <p>购物车中还没有商品，赶紧选购吧！</p>
                </div>
            </li>
        </ul>
    </header>

header{
    height: 40px;
    background-color: #333;

    padding: 0 60px 0 50px;

    display:flex;
    justify-content: space-between;
}
header ul{
    display: flex;
    justify-content: flex-start;    
}

header ul li a{
    color: #b0b0b0;
    font-size: 12px;
    line-height:40px;
    padding: 0 10px;

    border-right: 1px solid #424242;
}
header ul li:last-child a {
    border: none;
}
header ul li a:hover{
    color: #fff;
}
.shopping-cart{
    line-height: 40px;
    display: block;

    background-color: #424242;
}
.fa-shopping-cart{
    margin-right: 7px;
}
.shopping-cart:hover{
    color: #ff6700;
    background-color: #fff;
}
.shopping-cart:hover + .shopping-hover{
    display: block;
}
.shopping-hover{
    width: 320px;
    height: 100px;
    background-color: yellow;

    font-size: 14px;
    text-align: center;
    /*display: none;*/
}
.shopping-hover p{
    line-height: 100px;

}

Answer 1

.shopping-hover 加个样式 position: absolute 就好了。
多看看 css 基础。

Answer 2

父级的li要设置为position:relative; .shopping-hover 要设置成绝对定位position:absolute;调整位置用top:40px;left:0;