具有悬停效果的简单嵌套 ul li 菜单，但有关边距顶部的问题

Question

我的js：

$("#navShop li").hover(function () {
    $(this).find("ul.subCatMenu").stop(true, true).show();
},
function () {
    $(this).find("ul.subCatMenu").stop(true, true).hide();
});

在 JS 和我的 HTML 中没有什么特别之处：

<ul class="nav navbar-nav navbar-right">
    <li><a href="/" id="home">Home</a></li>
    <li><a href="About">About</a>
        <ul class="subCatMenu">
            <li><a href="#">About us</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </li>
</ul>

问题是当你悬停时设计师想要一条线，所以只是一个

a:hover{ border-bottom: 1px solid green;}

但是第二级ul和a之间有几个像素当我将光标移动到第二级ul时，当鼠标在a的边框或边缘时它消失了。 解释我可怜的无 Photoshop 图像： 红色 = 边距，蓝色 = 填充，绿色 = 边框 它类似于Css Dropdown Menu - Hover disappear，但我需要设计师的差距。提前致谢！

Answer 1

您正在寻找这样的东西吗？没有js的纯css

Demo Update

ul {
    list-style:none;
}
ul > li {
    display:block;
    position:relative;
    float:left;
}

ul > li > a {
    display:inline-block;
    padding:20px;
    background:#eee;
    border-bottom:1px solid #333;
    color:#333;
}

ul>li ul {
    opacity:0;
    width:200px;
    background:#333;
    visibility:hidden;
    position:absolute;
    top:100%;
    left:0;
    transition: all .3s ease .6s;
    margin:0;
    padding:0;
}

ul>li:hover ul {
    opacity:1;
    visibility:visible;
    transition: all .3s ease .1s;
}

ul>li li {
    float:none;
}

ul>li ul a {
    display:block;
    border:none;
    background:#333;
    color:#eee;
}