小鹏汽车官网的这种带间隙的菜单栏如何实现

Question

https://www.xiaopeng.com/news
纯 CSS 使用 hover 应该没法实现吧，不然移开一级菜单就失去焦点了。
我知道有个类似的 jquery 插件 https://github.com/kamens/jQu...
求思路

Answer 1

他官网就是使用hover实现的，给整的导航了个下边距8px，其实是无缝接的，白色部分只是select-name的css,是鼠标经过让菜单栏显示，就完了

<div class="select">
    <span class="select-name">服务</span>
    <div class="popup">
        <a href="/charging.html">充电</a>
        <a href="/finance.html">金融</a>
        <a href="/customerservice.html">售后</a>
    </div>
</div>

整体导航栏css
.header .header-wrap .nav .select {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
}
服务块经过的时候css：
 .header .header-wrap .nav .select:hover .select-name {
    border-radius: 19px;
    color: #000;
    background: #fff;
}
菜单栏css
.header .header-wrap .nav .popup {
    position: absolute;
    top: 45px;
    left: 50%;
    display: none;
    padding: 4px;
    width: 7vw;
    min-width: 80px;
    max-width: 103px;
    border-radius: 7px;
    background: #fff;
    transform: translateX(-50%);
    box-shadow: 0 0 2px #ccc;
}

Answer 2

加一个padding之类的，或透明元素，css明明可以搞定

Answer 3

我觉得与其硬要用纯CSS去实现，不如引入jQuery，然后使用里面的mouseenter和mouseleave去实现这样的效果，可能这样思路会清晰一点