Javascript 浮动div在悬停时消失

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

我的网站链接是：

我实际上不知道代码的哪一部分引起了问题。这是一个基于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;

}

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

更新：

我听从了Gerrit的建议，效果很好。但现在我面临着一个奇怪的问题。靠近最后一个父菜单的子菜单项之间有未知空格。下面是参考的屏幕截图。我尝试了很多事情，但都没有成功，事实上我无法理解原因

我在你的页面上做了一点“

尝试&错误”

，发现当我只添加

列计数时，它运行平稳且良好：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证明；）

我在你的页面上做了一点“
尝试&出错”
，发现当我添加
列计数：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证明；）

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

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

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

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

如果将有问题的代码包含在question@Swellar根据你的建议，我已经在帖子中添加了我已经修改过的代码。如果你把有问题的代码包含在你的文章中会更好question@Swellar根据你的建议，我已经在帖子中添加了我已经更改的代码。