Flyout Menu Modification

Hi

I was hoping that someone may be able to help me with some css coding so that i can change the way my flyout menu looks.

At the moment i have a zen cart installed version 1.3.7 and the horizontal css flyout menu for categories

CSS Horizontal Dynamic Menu (Paul’s edition)

Download Now!
File size: 13789 bytes
Downloaded: 4374 times
Zen Cart™ Version: v1.3.7
Version: 1.1
Last Updated: Mar 22 2007
Author: TooLateSmart

I chose this version of the menu as it had already been adapted for categories rather than all of the site links, what i would like to do is change the way that the flyout menu looks from the sample on this website [url]http://www.applezen.sagefish.com/[/url] to the way the littlewoods.com website looks. i already have the generator to build the structure of the categories so it will just be the layout settings for the css here is the current stylesheet for the menu If you think that this may be something in the coding for the generator then let me know and i’ll go back to that and try there any help would be appreciated as i have hit my head against the wall for the past week.

Thanks
Brad

body {

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

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

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

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

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

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

div#dropMenu {
width:750px;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

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

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

div#dropMenu ul.level1 {
width:750px;
margin:0 auto;
text-align:center;
background:#4F4F4F;
height:25px;
z-index:1000;
}

div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 7px 25px ;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:13em;}
div#dropMenu li.submenu li.submenu {}
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 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: white; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

Also in #CSS _↴