浮动div在悬停时消失

Question

我设计了一个分为两列的菜单，并将鼠标悬停在每个列表项上。一些列表项也有子菜单。 子菜单浮动在父项鼠标悬停上的父磁盘上方。但是子菜单鼠标悬停不起作用，而是在悬停时消失。网站基本上是在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。

更新

我遵循了格里特的建议，它运作得很完美。但现在我面临一个问题。靠近最后一个父菜单的子菜单项之间有未知空间。下面是参考的截图。我已经尝试了很多东西而没有任何效果，事实上我无法理解原因。

Answer 1

我在您的网页上做了一些“ID code X Y 1 Q1 4500 3435 1 Q2 3400 7643 1 Q3 4600 3214 1 Q4 3456 43434 ”，发现当我向try & error项添加column-count: 2;时，它的工作顺利而且很好：

.subcate

这也是一个gif证明;）

Answer 2

请添加列数：1;对于class itemsubmenu，问题将得到解决，即

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