懸浮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消失懸停

回答

相關問題