CSS Dropdown menu for the header- With Categories!

[kburner]

Hi Guys

Managed to do this with just the style sheet i am not 100% sure on the code for the stylesheet but here is the section i have changed.

div#dropMenu ul.level1 li.submenu:hover ul.level2 {background-color:none;margin-left:-15em;font-family:Arial, Helvetica, sans-serif; font-weight:100;color:#999999;font-size:12px;display:block;z-index:1000;width:450px;filter: alpha(opacity = 90);-moz-opacity:0.90;}
div#dropMenu ul.level2 li.submenu ul.level3 {background:none;text-align:left;font-size:10px;position:relative;display:list-item;}

Hope this helps others.

Thanks
Brad

I would like to see your site...

I have been struggling with my top level categories.

Thanks, Kim

[Spdster]

I am struggling wiht this mod, can anyone install it for me if i pay them? Thank You..

[autoace]

Hi,

I simply installed the code in the readme file (<!--bof-drop down menu display-->
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->
<div class="clearBoth"></div>) at the very bottom of my tpl_header.php file and it breaks the page - nothing under the CSS Flyout Menu in the header shows up!

NOTE: I am also using the Alternate Header v2.0 and added the above code to the bottom of the tpl_header.php file contained in that addon. No other code mods other than that.

In addition to that, I would like to know if it is possible to replace "Home", "Categories" and "Information" with my top-level categories and then having my sub level categories flyout.

Instructions and the necessary code (if needed) is truly appreciated.

[kburner]

I have been stuggling for several days and have looked thru forum. My issues seem to be css related. Need any help I can get with...

*categories are going vertical instead of horizonal across dropMenu bar
Here is css.

div#dropMenu {
position:relative;
width: 100%;
height:25px;
margin: 0em;
margin-top: 1px;
padding: 0em;
text-align:center;
z-index: 1000;
border-bottom: 2px solid #083562;
font-family: Lucida Sans;
float: center;
}

*space between dropmenu and logo/wrapper
Not sure where to change this. I have modified logo, wrapper and MenuWrapper with no luck.

Thanks, Kim

[kburner]

I have been stuggling for several days and have looked thru forum. My issues seem to be css related. Need any help I can get with...

*categories are going vertical instead of horizonal across dropMenu bar
Here is css.

div#dropMenu {
position:relative;
width: 100%;
height:25px;
margin: 0em;
margin-top: 1px;
padding: 0em;
text-align:center;
z-index: 1000;
border-bottom: 2px solid #083562;
font-family: Lucida Sans;
float: center;
}

*space between dropmenu and logo/wrapper
Not sure where to change this. I have modified logo, wrapper and MenuWrapper with no luck.

Thanks, Kim

*categories are going vertical instead of horizonal across dropMenu bar
Got this figured out...not sure what I did.
But I have 13 categories and can not get them to all fit. Caps are small - so they should fit....Any one know how to get them all across??

*space between dropmenu and logo/wrapper
Still have space in FF, but gone from IE...

Added to stylesheet:

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

Kim

[kburner]

*categories are going vertical instead of horizonal across dropMenu bar
Got this figured out...not sure what I did.
But I have 13 categories and can not get them to all fit. Caps are small - so they should fit....Any one know how to get them all across??

*space between dropmenu and logo/wrapper
Still have space in FF, but gone from IE...

Added to stylesheet:

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

Kim

I am still struggling with css with this mod. I love it - but can not get it to work. I have been going thru large forum looking for answers.

***I have 13 categories - how do I get them to fit?? I have hidden at this time because it causes them to go to next line.

***Extra space above categories in FF but not IE.


Please help!

Thanks, Kim

[kburner]

I am still struggling with css with this mod. I love it - but can not get it to work. I have been going thru large forum looking for answers.

***I have 13 categories - how do I get them to fit?? I have hidden at this time because it causes them to go to next line.

***Extra space above categories in FF but not IE.


Please help!

Thanks, Kim

Any one??

[kburner]

Been working very hard to get this to work! Almost there...

***I have 13 categories - how do I get them to fit?? I have hidden at this time because it causes them to go to next line.
Finally got all 13 to fit---used
#divdropMenu li

div#dropMenu li {
position:relative;
list-style:none;
margin:0;
margin-left: .5px;
float: left;
line-height:1em;
width: 7.6%;
text-align:center;
}

***Extra space above categories in FF but not IE.
Now works in FF but not IE... This is what code looks like.

div#dropMenu {
position:relative;
width: 100%;
height: 25px;
margin-top: -10.99px;
margin-bottom: .19px;
text-align:center;
z-index: 1000;
font-family: Lucida Sans;
}


Any suggestions on how to get IE to work?

Thanks, Kim

[jettrue]

Been working very hard to get this to work! Almost there...

***I have 13 categories - how do I get them to fit?? I have hidden at this time because it causes them to go to next line.
Finally got all 13 to fit---used
#divdropMenu li

div#dropMenu li {
position:relative;
list-style:none;
margin:0;
margin-left: .5px;
float: left;
line-height:1em;
width: 7.6%;
text-align:center;
}

***Extra space above categories in FF but not IE.
Now works in FF but not IE... This is what code looks like.

div#dropMenu {
position:relative;
width: 100%;
height: 25px;
margin-top: -10.99px;
margin-bottom: .19px;
text-align:center;
z-index: 1000;
font-family: Lucida Sans;
}


Any suggestions on how to get IE to work?

Thanks, Kim

See how in my original file, I have two width's for div#dropMenu li, and the second one starts with a *? That asterisk one is for IE only:

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

So you need to add *width:7.5;

to your div #dropMenu li. Or something like that, basically IE needs a slightly smaller percentage.