Support for CSS Flyout Menu

[Get Em Fast]

hey get em thanks. I decided to work with the new code that ckosloff posted and it works a lot better. I am just curious to know what code i need to add/edit to:

set a different hover and background colour for the submenu items then those that I have set for the top level menu items.

the menu is live at the moment http://mypumpkindoodle.com/store

thanks

John

Here is a menu that's designed right off your site, so everything but the colors are the same, except with the added scroll in your level 4 menu since it was soooooooooo long.
The colors have been "mapped" out. Each level's color is shown as a color (red, green, blue, etc) instead of being hex colors.

Anyone else who uses this for a reference to change background colors, KEEP IN MIND: This was NOT customized for your site!!! This is just a color "map" for you. In THIS css, the only level that will scroll is level 4, but if you need another level to scroll, leave everything the same except the 2 level numbers, and the desired height of your scrolling box. In other words, if you need level 3 to scroll, it would look like this:
[code]div#nav-cat ul.level2 li.submenu:hover ul.level3 { height: 200px;overflow: scroll;}[code]
This (above) tells your menu to scroll level 3 when you hover on level 2.

Any questions?

body {  
         behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
     margin-top: 0em;
     background-color: #ffffff;
     width: 100%;
     margin-left: auto;
     margin-right: auto;
     font-weight: bold;
     font-size: 1.3em;
}
div#nav-cat ul {
     margin: 0em; 
     padding: 0em; 
     width: 100%;  
     z-index: 1000;
     line-height: 14px;
     border: none;
}

div#nav-cat ul.level2 {background-color: #ffffff;}
div#nav-cat ul.level3 {background-color: #ffffff;}
div#nav-cat ul.level4 {background-color: #ffffff;}
div#nav-cat ul.level5 {background-color: #ffffff;}
div#nav-cat ul.level6 {background-color: #ffffff;}

div#nav-cat li {
     z-index: 1; 
     position: relative;
     list-style: none; 
     margin: 0;
     margin-top: 0; /* change it to whatever space you want to put space between buttons*/
     border-bottom: 1px solid black; /* <---this line may help or hinder IE menu shifting issues. */
     background-color: pink; /*Sets background of Menu items that DOES NOT have sub-menu's SYSTEM WIDE!!! */
    
}
div#nav-cat li li {
    margin-left: 0em;/* This puts space between menu and sub-menu, reccomend to leave at 0 unless you have over-lapping problems. */
    background-color: salmon; /* sets the background of submenu ,WITHOUT submenus, when menu is HOVERED */
} 
div#nav-cat li:hover {background-color: green;} /* sets the HOVER background of any MENU item that DOES NOT have submenu items */
div#nav-cat li.submenu {background-color: blue;} /* sets the background of any menu item that DOES have submenu items */
div#nav-cat li.submenu:hover {background-color: red;} /*sets the HOVER background of any menu item that DOES have submenu items */



div#nav-cat li a {background-color: transparent; /*<---This will set the background color of the WHOLE MENU, EVERY LEVEL, SYSTEM WIDE!!! If you want different colors, DON'T CHANGE THIS!!! */
    display: block;
    padding: 0.25em 0 0.3em 0em;
    text-decoration: none; 
    width: 100%;
    color: white; /* sets the font color of the menu, SYSTEM WIDE!! In order to over-ride the font colors for the menu, and have different 
    colors for each level, such as font color changing when you hover, you need to remove any MENU colors  referred to in your
    stylesheet.css, as they over-ride this stylesheet! (includes/templates/YOUR_TEMPLATE/css/stylesheet.css) */
}

div#nav-cat ul ul {
    position: absolute; top: 0; left: 100%;
    display: none; z-index: 1000;
}

div#nav-cat ul.level1 li.submenu:hover ul.level2, 
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
        display:block;
}
div#nav-cat ul.level3 li.submenu:hover ul.level4 { height: 200px;overflow: scroll;}

Hope this helps everyone "map" out their colors.
And also resolve the life-long question of "How can I get my menu to scroll, because it's so long.".