浮動小数点型浮動小数点表示が消える

Question

私は、2つの列に分割され、それぞれのリスト項目にカーソルを合わせたメニューを設計しました。リスト項目の中にはサブメニューもあります。 サブメニューが親アイテムのマウスの上にある親ディスクの上に浮いています。しかし、サブメニューのマウスのホバーは機能しません。ホバーの上で消えるのはです。サイトは基本的にMagentoプラットフォームです。だから私はちょうど2つの列にulを表示するメニューのCSSをカスタマイズしています。自分のサイトへ

リンクは次のとおりです。http://oraora.apponative.com/

私は実際に問題を作っているコードのどの部分を知ってはいけません。それはmagentoベースのサイトで、私はちょうどMenu.cssを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

列カウントを追加してください：1。問題が

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

Answer 2

私はあなたのページの「try & error」のビットを行なったし、私はちょうど.subcateアイテムにcolumn-count: 2;を追加するときには、滑らかで細かい作業をすることを見出し：ここ

.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-証明にもあります;）