CODEWITHSUNDEEP
javascripthtmlcssmagento
Saira Nawaz
Saira Nawaz

Reputation: 720

Floating div disappear on hover

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

Upvotes: 1

Views: 227

Answers (2)

Mustafa Saleem
Mustafa Saleem

Reputation: 74

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;
}

Upvotes: 1

Gerrit
Gerrit

Reputation: 1412

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

Upvotes: 3

Related Questions