带有悬停效果的简单嵌套ul li菜单，但有关margin-top的问题

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