skip to Main Content

I have designed a menu that split in two columns and has hover on each of its list item. Some of list items have sub menus as well. Sub menu float above parent disk on parent item mouse hover. But sub menu mouse hover not working instead it disappears on hover. Site is basically on Magento platform. So I have just customized menu css to show ul in two columns.

Link to my site is: http://oraora.apponative.com/

I actually dont know what portion of code is making an issue. It is a magento based site and I just changed Menu.css a bit by overriding below 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;

}

Above code portion I just used to split menu in 2 columns and show submenu div above others on mouse hover.

Updated:

I followed Gerrit’s suggestion, it worked perfect. But Now I am facing a weired issue. The submenu item near to last parent menu has unknown space in between. Below is screenshot for refrence. I have tried a lot of things and nothing worked, infact I am unable to understand reason. enter image description here

2

Answers


  1. I did a bit of “try & error” on your page and found out that its working smooth and fine when I just add column-count: 2; to the .subcate items:

    .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 */
    }
    

    Here is a gif-prove as well 😉

    enter image description here

    Login or Signup to reply.
  2. Please add the column-count: 1; to the class itemsubmenu the problem will be solved i.e

    .itemsubmenu {
        transform: translateZ(0);
        z-index: 999 !important;
        column-count: 1;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search