CSS Dropdown menu for the header- With Categories!

[abs007]

Ok cheers
Im using the category dressing add on also. Maybe i could add the code from the horizontal css menu to the category dressing. Or there maybe a way of getting them to work alongside each other

[abs007]

I use the google developers tool add on in firefox and it provides you with 3 little green ticks on the top right corner of your browser if the page loads without any errors. Now that i am using the css header drop down menu i am having the middle tick come as a red explanation mark. When hovered over it tells me that i have an error in css. When i click into it i have 4 errors coming from the css drop down header add on.

Any idea how to get this resolved

[jettrue]

I use the google developers tool add on in firefox and it provides you with 3 little green ticks on the top right corner of your browser if the page loads without any errors. Now that i am using the css header drop down menu i am having the middle tick come as a red explanation mark. When hovered over it tells me that i have an error in css. When i click into it i have 4 errors coming from the css drop down header add on.

Any idea how to get this resolved

They can be ignored, they are hacks to get this to work in older versions of IE. IF you want to get rid of the errors, get rid of the menu.

[studiotucker]

Jettrue.....Wanted to say thanks for the mod....No problems, no issues, loaded easily, works well in all browsers, including IE6, and easy to customize(though I have done only some minor tweaks). Easy to make multi-lingual. Cup-o-coffee on the way as soon as I take a break from building......

Misa's Fashion Cafe

[MediBiz]

Jettrue,

I know that your time and effort on this thead is voluntary. So I am trying not to post unless I have already tried my best to work out my own problems. I am having a menu behavior problem that I can not figure out on my own. I am hoping that you might have some insight into its resolution. The problem is that when using IE7, submenus spontaneously expand. For example: If you start on the top horizontal menu. Scroll down the drop menu, scroll over the third level flyout menu, then mouse over the top menu again, the submenus that were previously highlighted expand automaticaly while on the top menu.

You can observe this behavior at www.medibiz.us

If this has been addressed previously please just send the thread URL. But I've searched and haven't run across an answer.

The following is my stylesheet_header_menu.css. I have the feeling that my problem lies within something that I've done in this file. The notes are just notes to myself just ignore them.

Thanks for any advice that you may provide.
David

stylesheet_header_menu.css

body {
behavior: url(includes/csshover.htc);
}

/* Note 1: For the Arrow Down and Arrow Right images make sure that they are the same height as the background images. This will help them to display at the same height within the cells consistantly. */

div#dropMenu li a:hover,
div#dropMenu ul.level2 a:hover {
color: #111111!important;
background:url(../images/bar_orange.gif);
font-weight: bold;
display: block;
}

#dropMenuWrapper {
width:100%;
font-size:11px;
height: 25px;
}

div#dropMenu {
width:1000px;
border-top: 1px solid #9a9a9a;
border-bottom: 1px solid #9a9a9a;
padding: 0;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin:0; /* this is the space between the top menu and the drop menus, should be zero or there will be a problem with mouse hovering because of the gap. */
padding:0;
}

div#dropMenu li {
position:relative;
list-style:none;
float:left;
line-height: 1em;
}

div#dropMenu ul.level1 {
width:1000px;
text-align:center;
height: 25px;
font-weight: bold;
background:url(../images/bar_dark_blue.gif); /*background image of top row that contains sub-menus but is not highlighted. */
z-index:1000;
display: block;
}

div#dropMenu li a {
display: block;
/* Hides from IE5-mac */
height: 1%;
/* End hide from IE5-mac */
line-height: 1em;
padding-top: 0.6em;
padding-bottom: 0.6em;
padding-left: 20px;
padding-right: 22px; /* More padding to the right to provide more space or the down arrow. */
text-decoration: none;
color:#ffffff;
text-align:center;
border-right: 1px solid #555555;
border-bottom:0; /* This is necessary so that when the mouse is moved from below the top menu to the top menu that there is no space between the top menu and drop menus where the drop menus automatically explode. */
border-left: 0;
border-top: 0;
}

div#dropMenu li:hover {display: block; margin:0; padding:0;} /* If you put the hover image on this line, it creates a hightlighted breadcrumb indicator on the tab in the top bar. */
div#dropMenu li.submenu {background: url(../images/menudown.gif) 95% 50% no-repeat; margin:0; padding:0;}
div#dropMenu li.submenu:hover { }
div#dropMenu li a.noLine {border:0; margin:0;} /* This keeps the very last right vertical border white line from displaying on the very top row. */
div#dropMenu>ul a {width: auto; border-left:0; border-top:0; border-bottom:0;} /* These "border-XX: 0;" helps to prevent the drop menus from automatically exploding, caused by mouse-overs on adjecent menu tabs. */
div#dropMenu ul ul {position: absolute; width: 17em; display: none; border:0; padding: 0; } /* This position and width values help to keep the hover image on the very top row from extending onto neighboring cells. */
div#dropMenu ul ul li {border-left: 1px solid #555555; border-bottom: 1px solid #555555; border-right: 1px solid #555555; background:url(../images/bar_blue.gif); width: 17em; z-index:1000;} /* This combination of border top & bottom keeps the drop menus from overlapping with the top menu, and having too much space between drop menu rows. This background image/color is used for drop menus that don't have sub-menus. */
div#dropMenu li.submenu li.submenu {background: url(../images/menuright.gif) 96% 50% no-repeat; margin:0; padding:0; }

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: 17em; display:block;z-index:1000; }

div#dropMenu ul.level2 {background: url(../images/bar_blue.gif); z-index:1000;position:absolute;left:0; } /* this background image/color is for drop menus that DO have sub-menus. "top: 25px;" positions the drop menu just below the top menu. */

div#dropMenu ul.level3,
div#dropMenu ul.level4,
div#dropMenu ul.level5,
div#dropMenu ul.level6,
div#dropMenu ul.level7,
div#dropMenu ul.level8{background: url(../images/bar_blue.gif); top: -1px; left: 17em; z-index:1000;; padding:0; border-top: 1px solid #555555;} /* "top: Xpx;" positions the 2nd drop menu row X pixels lower than the 1st drop menu row. Use this to help provide a space/seperation or visual indication that this column is not associated with the very top row. */

div#dropMenu ul.level2 a {display: block; padding-right: 0; padding-left: 1em; color:#333333; font-weight: bold; text-transform:none; text-align:left; margin: 0; border: 0;} /* this is image/text color on drop-down submenu. The "margin: and border;" values of zero is important for the drop menus to NOT inherit the borders set above for the top menu. "Padding-left: 1em;" is used to indent the left aligned text from the left vertical bar. The "display: block;" on this line is important in preventing an annoying behavior where the sub-menus will automaticall expand on mouse-over movements on the top menu. */

/* div#dropMenu ul.level2 a:hover {display:block; border: 0;} */ /* This is not used in this version of the menu */

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

[jettrue]

Jettrue,

I know that your time and effort on this thead is voluntary. So I am trying not to post unless I have already tried my best to work out my own problems. I am having a menu behavior problem that I can not figure out on my own. I am hoping that you might have some insight into its resolution. The problem is that when using IE7, submenus spontaneously expand. For example: If you start on the top horizontal menu. Scroll down the drop menu, scroll over the third level flyout menu, then mouse over the top menu again, the submenus that were previously highlighted expand automaticaly while on the top menu.

You can observe this behavior at www.medibiz.us

If this has been addressed previously please just send the thread URL. But I've searched and haven't run across an answer.

The following is my stylesheet_header_menu.css. I have the feeling that my problem lies within something that I've done in this file. The notes are just notes to myself just ignore them.

Thanks for any advice that you may provide.
David

stylesheet_header_menu.css

body {
behavior: url(includes/csshover.htc);
}

/* Note 1: For the Arrow Down and Arrow Right images make sure that they are the same height as the background images. This will help them to display at the same height within the cells consistantly. */

div#dropMenu li a:hover,
div#dropMenu ul.level2 a:hover {
color: #111111!important;
background:url(../images/bar_orange.gif);
font-weight: bold;
display: block;
}

#dropMenuWrapper {
width:100%;
font-size:11px;
height: 25px;
}

div#dropMenu {
width:1000px;
border-top: 1px solid #9a9a9a;
border-bottom: 1px solid #9a9a9a;
padding: 0;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin:0; /* this is the space between the top menu and the drop menus, should be zero or there will be a problem with mouse hovering because of the gap. */
padding:0;
}

div#dropMenu li {
position:relative;
list-style:none;
float:left;
line-height: 1em;
}

div#dropMenu ul.level1 {
width:1000px;
text-align:center;
height: 25px;
font-weight: bold;
background:url(../images/bar_dark_blue.gif); /*background image of top row that contains sub-menus but is not highlighted. */
z-index:1000;
display: block;
}

div#dropMenu li a {
display: block;
/* Hides from IE5-mac */
height: 1%;
/* End hide from IE5-mac */
line-height: 1em;
padding-top: 0.6em;
padding-bottom: 0.6em;
padding-left: 20px;
padding-right: 22px; /* More padding to the right to provide more space or the down arrow. */
text-decoration: none;
color:#ffffff;
text-align:center;
border-right: 1px solid #555555;
border-bottom:0; /* This is necessary so that when the mouse is moved from below the top menu to the top menu that there is no space between the top menu and drop menus where the drop menus automatically explode. */
border-left: 0;
border-top: 0;
}

div#dropMenu li:hover {display: block; margin:0; padding:0;} /* If you put the hover image on this line, it creates a hightlighted breadcrumb indicator on the tab in the top bar. */
div#dropMenu li.submenu {background: url(../images/menudown.gif) 95% 50% no-repeat; margin:0; padding:0;}
div#dropMenu li.submenu:hover { }
div#dropMenu li a.noLine {border:0; margin:0;} /* This keeps the very last right vertical border white line from displaying on the very top row. */
div#dropMenu>ul a {width: auto; border-left:0; border-top:0; border-bottom:0;} /* These "border-XX: 0;" helps to prevent the drop menus from automatically exploding, caused by mouse-overs on adjecent menu tabs. */
div#dropMenu ul ul {position: absolute; width: 17em; display: none; border:0; padding: 0; } /* This position and width values help to keep the hover image on the very top row from extending onto neighboring cells. */
div#dropMenu ul ul li {border-left: 1px solid #555555; border-bottom: 1px solid #555555; border-right: 1px solid #555555; background:url(../images/bar_blue.gif); width: 17em; z-index:1000;} /* This combination of border top & bottom keeps the drop menus from overlapping with the top menu, and having too much space between drop menu rows. This background image/color is used for drop menus that don't have sub-menus. */
div#dropMenu li.submenu li.submenu {background: url(../images/menuright.gif) 96% 50% no-repeat; margin:0; padding:0; }

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: 17em; display:block;z-index:1000; }

div#dropMenu ul.level2 {background: url(../images/bar_blue.gif); z-index:1000;position:absolute;left:0; } /* this background image/color is for drop menus that DO have sub-menus. "top: 25px;" positions the drop menu just below the top menu. */

div#dropMenu ul.level3,
div#dropMenu ul.level4,
div#dropMenu ul.level5,
div#dropMenu ul.level6,
div#dropMenu ul.level7,
div#dropMenu ul.level8{background: url(../images/bar_blue.gif); top: -1px; left: 17em; z-index:1000;; padding:0; border-top: 1px solid #555555;} /* "top: Xpx;" positions the 2nd drop menu row X pixels lower than the 1st drop menu row. Use this to help provide a space/seperation or visual indication that this column is not associated with the very top row. */

div#dropMenu ul.level2 a {display: block; padding-right: 0; padding-left: 1em; color:#333333; font-weight: bold; text-transform:none; text-align:left; margin: 0; border: 0;} /* this is image/text color on drop-down submenu. The "margin: and border;" values of zero is important for the drop menus to NOT inherit the borders set above for the top menu. "Padding-left: 1em;" is used to indent the left aligned text from the left vertical bar. The "display: block;" on this line is important in preventing an annoying behavior where the sub-menus will automaticall expand on mouse-over movements on the top menu. */

/* div#dropMenu ul.level2 a:hover {display:block; border: 0;} */ /* This is not used in this version of the menu */

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

I know you're using the other menu. Does the same thing happen on my menu, at http://www.applezen.sagefish.com ?

I know this was a problem for a while, though I thought it was fixed with an update, but I'm not positive. However, I don't support the other menu, and I'm not sure what the fix was, if it was indeed fixed.

So anyway, my advice is to see if it happens at my above site; if not, download my latest version of my menu, and see if you can find some differences in my stylesheet that might help.

If it does happen at my site, it's just a bug you'll have to decide whether or not you can live with. You might be able to go through this thread and see if a solution is there, I know the behavior you're referring to has been discussed before.

[countrycharm]

jettrue could you please take a look at the link below and tell me how to correct these problems. Thee are 4 errors with the dropMenu css for some reason. Thank you
http://jigsaw.w3.org/css-validator/v...rdstore.com%2F

[jettrue]

jettrue could you please take a look at the link below and tell me how to correct these problems. Thee are 4 errors with the dropMenu css for some reason. Thank you
http://jigsaw.w3.org/css-validator/v...rdstore.com%2F

To correct them, remove the menu. They are hacks for IE issues

[countrycharm]

To correct them, remove the menu. They are hacks for IE issues

So what you saying I would have to remove the menu to correct them, now thats just not going to happen....lol
I guess I will live with it. The same for the other problem to. Thanks for taking a look.

[jettrue]

So what you saying I would have to remove the menu to correct them, now thats just not going to happen....lol
I guess I will live with it. The same for the other problem to. Thanks for taking a look.

Exactly. If it weren't for IE, this thread would be less than half as long.