从li和ul之间的空格开始，CSS3下拉列表不会保持打开状态

Question

我正在为公司制作一个CSS3下拉菜单，并遇到了一个小问题。我首先想到问题是由wordpress引起的，但在jsfiddle中重新创建导航后我知道它是另一回事。

我有一个带有两个子菜单的nav，在子菜单上我使用了一个伪前置元素，在顶部给它一个三角形。这是一个很好的效果，在我测试之后我发现了一个问题。它功能很好，看起来很流畅，但是li和ul之间的空白区域引起了一个相当大的问题，如果你在那个空格之间悬停，子菜单将关闭，因为它不在{ {1}}悬停状态。

我对css非常好并尝试了很多选项，但它们都会导致同样的问题。有人有主意吗？我宁愿不接受那个设计元素，但是如果必须的话我还是应该使用jQuery？

CSS

li

jsFiddle

Answer 1

您可以在:after元素后面放置一个透明的:before元素。这不是:after假设使用的方式，但看起来效果很好

Updated jsFiddle

#top-menu ul li ul:after {
    content: "";
    position: absolute;
    top:-10px;
    left:0px;
    height:10px;
    width:100%;
    display:block;
    z-index:1001;
}