mod on CSS Horizontal Dropdown

[familynow]

I finally picked the category menu[1] I want for my site[2]. Tweaked it by grabbing the mega-menu style from this[3] and added some personal touch. The only thing I can't seem to figure out is how to change the menu placement; I'm designing my site to be viewable at 1024x768 and up. However, the more I move to the right categories the more the user would need to scroll(at 1024x768) to view the submenu. I've tried to tighten up the allowable width but then the font is either too small or the menus are to bunched together...Either-way I loose the 'userfreindliness' that the mega-menu style offers. I need someone with some css experience to shine-in with more options cuz mine suck since I don't really know what I'm doing.


ref.
[1] familynowDOTcaSLASHshop -sorry, it's not public yet!
[2] CSS Horizontal Dropdown Menu [http://www.zen-cart.com/forum/showthread.php?t=58629]
[3] CSS Horinzontal Dropdown Menu with JQuery [http://www.zen-cart.com/index.php?ma...ducts_id=1874]

Thanks in advance for any assistance.

Phil

[gjh42]

You can address the menus on the right with increasing amounts of negative left positioning, like this:

#dropMenu>ul>li+li+li+li+li+li>ul {
   left: -4em !important;
   }
#dropMenu>ul>li+li+li+li+li+li+li>ul {
   left: -12em !important;
   }
#dropMenu>ul>li+li+li+li+li+li+li+li>ul {
   left: -20em !important;
   }
#dropMenu>ul>li+li+li+li+li+li+li+li+li>ul {
   left: -1.9em !important;
   }

The last ones need a small offset because they have only one column of items.

[familynow]

I certainly wouldn't have ever come up with that. Thank you!

[familynow]

I added a top-level category and removed 'Contact Us'. I'm assuming I need to change the above but can't for the life of me make sense of how this works...Help!?

[gjh42]

You have essentially one additional tab to care for. Take the last rule from above

#dropMenu>ul>li+li+li+li+li+li+li+li+li>ul {
   left: -1.9em !important;
   }

and modify it and add another one:

#dropMenu>ul>li+li+li+li+li+li+li+li+li>ul {
   left: -28em !important;
   }
#dropMenu>ul>li+li+li+li+li+li+li+li+li+li>ul {
   left: -1.9em !important;
   }

[familynow]

I still don't understand...But it works!

Thank you so much.

[gjh42]

#dropMenu>ul>li+li+li+li+li+li+li+li+li>ul { means a sublist in a ninth consecutive li.

#dropMenu>ul>li+li+li+li+li+li+li+li+li+li>ul {means a sublist in a tenth consecutive li.

[familynow]

Okay. That helps.

Thanks!