悬浮div消失悬停

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

链接到我的网站是：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。

更新时间：

我跟着格里特的建议，它的工作完美。但是现在我面临一个亟待解决的问题。靠近最后父菜单的子菜单项之间存在未知空间。以下是参考的截图。我尝试了很多东西，没有任何工作，事实上我无法理解理由。

来源

2017-08-17 Saira Nawaz

它会更好，如果您在您的问题 – Swellar

@Swellar按照你的建议有问题的代码要解决的课，我已经添加代码后，我已经改变了。 –

请添加列数：1;到itemsubmenu问题会即

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

来源

2017-10-05 12:17:58

我做你的页面上有点“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，证明以及）

来源

2017-08-17 08:33:10

Halfman，你会查看更新的问题吗？ –

悬浮div消失悬停

回答

相关问题