浮动 div 悬停时消失

Question

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

Link到我的站点是：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 的建议，效果非常好。但现在我面临一个奇怪的问题。靠近最后一个父菜单的子菜单项之间有未知的 space。下面是截图供参考。我尝试了很多东西但没有任何效果，事实上我无法理解原因。

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 证明 ;)

Answer 2

请添加列数：1；到 class 项子菜单，问题将得到解决，即

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

浮动 div 悬停时消失

Floating div disappear on hover

html

javascript

css

magento