CSS Dropdown menu for the header- With Categories!

[DivaVocals]

You sir are the KING of support here.. Not I..

Nope.. I didn't give up.. I was waiting patiently for you to find time in your busy schedule to submit it.. If ANYONE understands this, it is I .. Can't wait til it's approved.. I've got a new site I'm starting for a non-profit that I want to use this menu for.. I MAY be picking your brain to get your thoughts on how to make one SMALL tweak I need..

Diva.............I KNOW you done gave up on me, didn't you? Well............SURPRISE!!!! I JUST submitted the new jquery version to the downloads section!

I would tell you all the features here, but as this is completely a different module now, I'm thinking I'm going to have to start a support thread for it as well, because I'm sure YOU (since it looks like Jade hates us and won't grace us with her appearance, anymore and you've taken her place in supporting this menu.) don't want all the extra questions that this menu is going to bring up.

Any way...........I'll let everyone know here, if and when the download is approved.

[Get Em Fast]

I MAY be picking your brain to get your thoughts on how to make one SMALL tweak I need..

......and that being?..........

[DivaVocals]

......and that being?..........

If I was using a blog embedding solution (Numinix's would be the one I'd use) I am not QUITE sure how I would go about adding the correct code to pull in the blog categories into the menu.. gonna mess around with it next weekend.. But I have a sneaking feeling that I might need an assist with this..

[Ravyn]

Hey Get Em Fast,

Don't mean to be a bother, but you've been deemed the KING of support around here apparently, just wondering if you had any tips on the 3 issues I posted about on the previous page. Can't for the life of me figure out where I'm going wrong on these items.

Cheers,
Ravyn

[Jeniferous]

Hi - i've read through a lot of posts but can't spot an answer. It's probably something silly but....

I installed everything ok and on firefox the menu works fine. However in IE8 the menu opens on top of the top category which looks a bit messy!

The sites local so i can't show you as such but here's my stylesheet and screenshot:-
body {
behavior: url(includes/csshover.htc);
}

/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#0066CC;}
*/

/*blue*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#0066CC;}


/*red
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#0066CC;}
*/

/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#0066CC;}
*/

#contentMainWrapper {z-index:0;}

div#dropMenu {
width:100%;
margin:0;
text-align:center;
z-index:1000;
position:relative;
padding-top:10px;
}

div#dropMenu ul {
margin:0;
padding:0;
}

div#dropMenu li {
position:relative;
list-style:none;
margin:0;
float:left;
line-height:1em;
width:16.667%;
*width:16.649%;
}

div#dropMenu ul.level1 {
width:100%;
margin:0 auto;
text-align:center;
background:#E8F17B; /*background color of top menu when NOT selected. */
z-index:1000;
float:left;
}

div#dropMenu li a {
display: block;
/* Hides from IE5-mac \*/
height: 1%;
/* End hide from IE5-mac */
padding: .6em 0;
text-decoration: none;
text-transform:uppercase;
color:#9933CC;
text-align:center;
border-right:1px solid #9933CC;
}

div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto; z-index:1000;}
div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #E8F17B; width:12em; z-index:1000;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {position: absolute; width: 12em;display:block;z-index:1000;}
div#dropMenu ul.level2 {background:#E8F17B; z-index:1000; position:absolute;left:0;}
div#dropMenu ul.level3,
div#dropMenu ul.level4,
div#dropMenu ul.level5,
div#dropMenu ul.level6,
div#dropMenu ul.level7,
div#dropMenu ul.level8{top: 0; left: 12em; background:#E8F17B}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: #9933CC; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color: #33FFCC;}

.clearBoth {
clear:both;
height:0;
font-size:0;
line-height:0;
}

[Get Em Fast]

Hi - i've read through a lot of posts but can't spot an answer. It's probably something silly but....

I installed everything ok and on firefox the menu works fine. However in IE8 the menu opens on top of the top category which looks a bit messy!

Hmmm.......this normally don't happen, but you may have to create an IE stylesheet and add this to it, adjusting the margin as needed:

div#dropMenu ul.level2 {margin-top: 10px;}

[Get Em Fast]

If I was using a blog embedding solution (Numinix's would be the one I'd use) I am not QUITE sure how I would go about adding the correct code to pull in the blog categories into the menu.. gonna mess around with it next weekend.. But I have a sneaking feeling that I might need an assist with this..

Hmmm..........I've never messed with that at all. I don't know how much help I would be, but I bet together we can figure it out.

[DivaVocals]

Hmmm..........I've never messed with that at all. I don't know how much help I would be, but I bet together we can figure it out.

Yep.. I figured we could.. I've got some "theories" on how to make this work.. Gonna give 'em all a shot first before I bother you for another set of eyes to assist.. and if I figure it out I will of course post the results..

[Donn]

I installed this on a ZC 1.3.8A, and a ZC 1.9H.

Very cool mod!!!

I was wondering if there is a way to show lots of sub-categories?

For instance:

Have a scroll-bar on the right-hand side of the sub-categories so that any that appear below the bottom of the screen may be scrolled up and then hovered over.

Alternatively, hard-code the list of links, so that the sub-categories are split, maybe a-F G-L, etc...and so there wouldn't be so many in each..... (this seems like a poor solution, just a work-around!!!)


ALSO....

I also wanted to have the three highest categories listed ON the top header area, rather than a (definable) 'Categories' heading.

AND....

Maybe also, the Categories generator function can altered so that it auto-generates split-lists as described above.

[Donn]

.....

I was wondering if there is a way to show lots of sub-categories?

For instance:

Have a scroll-bar on the right-hand side of the sub-categories so that any that appear below the bottom of the screen may be scrolled up and then hovered over......

How about these CSS properties:
overflow:scroll;
overflow: Auto;

Would either work? Where in the CSS file should this go, if this IS correct?