Need an Advanced Category Drop-Down Menu

1.3.9h

The business owner I am working for wants a category drop-down menu similar to the one at: halloweenexpress [dot] com. Notice how some categories have 2 or more columns and very small text.

I tried to use the Simple Drop-down mod in "Addons and Contributed Modules" but the type was too big and somehow negatively effected the CSS of the Sidebox Category Menu.

Anybody know a mod or modder who could help me achieve this goal? :lamo:

If you want advanced, why use "simple"?
Your best bet would be CSS Horizontal Dropdown Menu With jquery. There is also a "mega menu" adaptation of that base mod (in a forum thread if not in Free Addons) which could give you the subcat columns.

keep in mind that the "mega-menu" is not yet fully developed, and is still in the experimental stage..............ESPECIALLY in the css styling. I would be further in the development of it, but life has gotten in the way, leaving VERY little time for me to even SEE a computer anymore, much less WORK with one.....................

I would just use the Simple Tab solution if I could figure out how to solve one major problem:

This is the Category Tab navigation bar as the business owner wants it:

With help from a few at the forum, I have done extensive alteration to the CSS to make it appear like this.

The problem is that when I load the Simple Drop-down, somehow it kills the layout and suddenly I have multiple lines of categories:

Can somebody help me keep the wanted layout and simultaneously get the drop-down menu to work correctly? I've truly hit a wall trying to please this client :frusty:

losteras.com

We can't begin to diagnose styling from a screenshot - we need to see it live to do that. But I would say in general that the Simple Dropdown mod has different class tags than the standard cat-tabs menu, so you will need to change some selectors on your style rules. It is possible that the mod does not have some tags that would be needed for proper styling; let us see it and we can find out.

@Glen...........Hehe............you missed the link in the above post, didn't you? See it now..........at the bottom of the post? losteras.com

Drink another cup...........your eyes aren't all the way open, yet.....:D

Not a link, but yes, you can use that to get to the site:)

You appear to have Get Em Fast's dropdown installed, and not the simple tabs? We can't diagnose that when you don't have it...

Apologies. Yes. I removed the Simple Dropdown to try the Jquery one. I wasnt sure if anybody could help so I tried the next possible solution. I appreciate that you're offering to look. I have just now reinstated it for you to see the problem live.

BUT, I've just noticed ANOTHER problem with the Simple version. When I hover over 'S e x y Costumes', nothing drops down, but there are 3 products. Also, in 'Adult Costumes', there are multiple costumes, but only 'Women's Devilish Angel Costume' appears in what drops down... Not sure why. :frusty:

For the moment I'm still experimenting with the Jquery dropdown, that's why both Category Navigation bars are present.

Keeping the current look of the charcoal gray Category Navigation with the dropdown is the goal. I hope with your help I can get one or the other working to the client's satisfaction. :unsure:

Thanks :lamo:

:frusty: :lamo:

I've been away from my home computer with its diagnostic tools for most of the past week. I'll take a look at it now.

This still has a couple of issues beside not having the backgrounds you had for the other navbar, but it will get you a good way toward your goal.
stylesheet_catTabsDropdown.css
(Additions and replacements in red.)```
#navCatTabsDropdown
{

/ margin-top: -10px;/

}
#navCatTabsWrapper {margin: 0; padding: 0;}
#navCatTabsDropdown {margin: 0; padding: 0;}

#navCatTabsDropdown ul li
{

position: relative;

/ display: inline;
margin-right: 12px;/

}

#navCatTabsDropdown>ul {margin: 0; padding: 0;}
#navCatTabsDropdown>ul>li {display: block; float: left; width: 79px; margin: 0; padding: 0; background: #deb887 url(../images/menu_bg.png) repeat-x;}
#navCatTabsDropdown>ul>li:hover {background-color: #aaddff;}
#navCatTabsDropdown>ul>li>a {display: block; height: 30px; padding-top: 3px; font-size: 0.6em;}

#navCatTabsDropdown * li ul
{
display: block;
left: 0;
visibility: hidden;
position: absolute;
padding: 0.5em;
white-space: nowrap;
z-index: 100;
z-index: 1009;

font-size: 9px;

}

#navCatTabsDropdown * ul li
{
display: block;
text-align: left;
list-style-type: none;
}

#navCatTabsDropdown * li:hover ul
{
visibility:visible;
background-color: #ffffff;
border: 2px outset;
white-space: nowrap;
}

Thank you. I'll try this today. I'll post how it goes. :bigups:

Thank you. for the most part it worked. :bigups:

But, there is a strange alignment in 'adult costumes'. It appears aligned to the top and the rest of the categories appear aligned bottom. :wacko: Any ideas why?

I'll keep experimenting to see if I can find the cause.

Thank you :D

I should mention that I wasnt trying to use both dropdown menus. I left both running to see if someone could help me with one or the other. I have now removed the Jquery version and intend to concentrate on the one you helped me with :bigups:

Figured out the problem! The graphics in the logo container were too tall and were pushing the blocks under them down by the same amount of pixels :clap:

Thank you for helping me get this dropdown working :bigups:

Good to hear! That alignment issue was what I was talking about when I said it still had issues. I didn't find its cause in my quick assessment before.

gjh one last question. :lookaroun

I have the dropdown working properly except 1 final detail. I tried all i know to change this but cant find how to do it.

The dropdown links are html standard BLUE and when viewed change to PURPLE.

What I need is for the 'sub-category' links to be WHITE with no underline. When hovered they should appear with an underline and when visited previously, remain WHITE.

How can I do this? :huh:

I'm stumped :frusty:

No problem:) Let me look at your menu and identify the selectors required for styling.
Try this:```
#navCatTabsDropdown>ul>li>a, #navCatTabsDropdown>ul ul a {color: white; text-decoration: none;}
#navCatTabsDropdown>ul ul a:visited, #navCatTabsDropdown>ul ul a:hover {color: white; text-decoration: underline;}

Wow! I tried before asking but I just couldn't figure it out :frusty:

Thank you! You're my CSS hero! :bigups: