javascript - float div 在悬停时消失

Question

我设计了一个分为两列的菜单，悬停在它的每个列表项上。一些列表项也有子菜单。 子菜单在父元素鼠标悬停时 float 在父磁盘上方。但是子菜单鼠标悬停不起作用，而是在悬停时消失。网站基本上是在Magento 平台上。所以我刚刚自定义了菜单 css 以在两列中显示 ul。

我网站的链接是:http://oraora.apponative.com/

我实际上不知道代码的哪一部分出了问题。这是一个基于 magento 的站点，我只是通过覆盖下面的 css 稍微更改了 Menu.css。

.magemenu-menu.horizontal-menu .menu .inner-cms-block .block.block-cate{
width: 430px;
min-width: 430px;
column-count: 2;
}

.itemsubmenu {
    transform: translateZ(0);
    z-index: 999 !important;

}

上面的代码部分我只是用来将菜单分成 2 列，并在鼠标悬停时在其他部分上方显示子菜单 div。

更新:

我听从了 Gerrit 的建议，效果非常好。但现在我面临一个奇怪的问题。靠近最后一个父菜单的子菜单项之间有未知空间。下面是截图供引用。我尝试了很多东西但没有任何效果，事实上我无法理解原因。

Answer 1

我在你的页面上做了一些“try & error”，发现当我将 column-count: 2; 添加到.subcate 项:

.magemenu-menu.horizontal-menu .menu .inner-cms-block .block.block-cate .subcate {
    position: relative;
    float: left;
    width: 100%;
    padding-left: 25px;
    border-bottom: 1px dotted #d7d7d7;
    column-count: 2; /* I added this */
}

这里还有一个 gif 证明 ;)