Pure CSS Mega Menu

[DivaVocals]

Thanks for the addon.
How do I remove under the INFO tab the "GENERAL INFO" and leave everything else in?

Answer posted on the previous page.. (Hint: See my post to JohnnyScience #122)

[Skullman]

HA. Thanks

[DivaVocals]

Well I hate to come back and ask for help on this again, but I and stumped and I need some help resolving this once and for all.. I made the recommended changes to change my categories dropdown into a two column display. This works fine.. The categories are displayed in two columns..

However, when you hover over the column on the left, the column on the right "jumps" over to the left. I've run out of ideas to fix this.. Hoping that someone in the comunnity can help me sort out what it is I am missing to fix this once and for all.. (PRETTY PLEASE)

You can see what I mean here: http://clientlaserdiscvault(dot)overthehillweb(dot)com/ Hover over the "Our Products" link to see the two column category display.. Now hover over the categories in the left column and see how the categories in the right column "jump" to the left..

You're losing 35px of right-margin on the hover. At line 80, you've got

.mega-menu .level2 li {
    margin-right: 35px;
}

and the styling on line 75 sets the margin to 0 on hover. Just set margin: 0 35px 0 0;

Lat9!!! My hero!!! THANK YOU SOOOOO MUCH!!!!! I have been staring at this so long that it looks like I missed the obvious.. Though I didn't know what the answer was, my gut told me it was in my stylesheet and not in the categories_ul_generator.php (as it had been suggested me was the key to the solution).. So glad I decided to try one more time to ask for help..

Okay so I have one more teensy thing to work out here..

The manufacturers links are shifting/re-ordering themselves when you hover over the links. See http://laserdiscvault(dot)com. The manufacturers menu is the one called "Collections". It's driving me crazy to make this behavior stop..

[gjh42]

So far I have gotten that the li elements on hover are taking all and possibly more of their available half-box width, which is the proximate cause of the jumpiness. There are so many rules that involve li and hover selectors that I haven't found a more precise cause yet. I really need to have a printout so I can cross-reference and highlight rules easier...

[picaflor-azul]

Okay so I have one more teensy thing to work out here..

The manufacturers links are shifting/re-ordering themselves when you hover over the links. See http://laserdiscvault(dot)com. The manufacturers menu is the one called "Collections". It's driving me crazy to make this behavior stop..

If you want to take a look and compare stylesheets, I recently made this manufacturers drop down into 6 columns ---shop by size/type:

https://www.aussiesapphire.com.au/

Thanks,

Anne

[DivaVocals]

So far I have gotten that the li elements on hover are taking all and possibly more of their available half-box width, which is the proximate cause of the jumpiness. There are so many rules that involve li and hover selectors that I haven't found a more precise cause yet. I really need to have a printout so I can cross-reference and highlight rules easier...

Yep.. that's what I have figured out thus far too.. I just am not seeing CLEARLY why the manufacturers are misbehaving while the two column products are just fine.. grrrrrrrr...

If you want to take a look and compare stylesheets, I recently made this manufacturers drop down into 6 columns ---shop by size/type:

https://www.aussiesapphire.com.au/

Thanks,

Anne

I will take a look, but since they do not have products let alone multi-column products I am not confident this will fully help... But I will take a looksee.. Very frustrating.. I fix one issue and uncover/create another one..

[lat9]

Okay so I have one more teensy thing to work out here..

The manufacturers links are shifting/re-ordering themselves when you hover over the links. See http://laserdiscvault(dot)com. The manufacturers menu is the one called "Collections". It's driving me crazy to make this behavior stop..

Hmmm ... the Collections item is defined with class dropdown_2columns but then you only have one <div class="col_2a firstcolumn"> defined within that div. I'm pretty sure that the dropdown_2columns is (er) expecting two col_2x class divs within it.

Update: Try defining it with the col_2 class instead of col_2a; that's what's used on the categories ...

[DivaVocals]

Hmmm ... the Collections item is defined with class dropdown_2columns but then you only have one <div class="col_2a firstcolumn"> defined within that div. I'm pretty sure that the dropdown_2columns is (er) expecting two col_2x class divs within it.

Update: Try defining it with the col_2 class instead of col_2a; that's what's used on the categories ...

Shoot forgot about that.. let me look when I get home form work tonight.. I added that stupid col_2a because I thought it would solve the other problem I was having with the categories.. Forgot it was still there..

[lat9]

Changing the col_2a to col_2 fixes some, but not all of the 'jumps'. Somewhere in the stylesheet, there's a margin-right: 35px that's being added to the col_2 li's on hover.

[DivaVocals]

Changing the col_2a to col_2 fixes some, but not all of the 'jumps'. Somewhere in the stylesheet, there's a margin-right: 35px that's being added to the col_2 li's on hover.

Ahhhh.. okay.. let me go correct this all when I get home.. I think my earlier efforts to resolve one issue and the susequent fix, might have unveiled this issue..