浮动div在悬停时消失答案

【问题标题】：Floating div disappear on hover浮动div在悬停时消失
【发布时间】：2017-08-17 07:32:17
【问题描述】：

我设计了一个分为两列并悬停在每个列表项上的菜单。一些列表项也有子菜单。 子菜单在父项鼠标悬停时浮动在父磁盘上方。但是子菜单鼠标悬停不起作用，而是在悬停时消失。网站基本上在 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 的建议，效果很好。但现在我面临一个奇怪的问题。靠近最后一个父菜单的子菜单项之间有未知空间。下面是截图供参考。我已经尝试了很多东西，但没有任何效果，事实上我无法理解原因。

【问题讨论】：

如果您在问题中包含有问题的代码会更好
@Swellar 根据您的建议，我已添加代码以发布我已更改的内容。

标签： javascript html css magento

【解决方案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 证明 ;)

【讨论】：

【解决方案2】：

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

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

【讨论】：