CSS Flyout Menu 1.4

[websightdesign]

I am currently in the process of making an adjustment to the flyout menu 1.4 so that it will display a tab image as the background of each menu item in the top level of categories each background image will be the same size and will only change on mouse over to another background image looking like it has been pressed down.

I am currently using zen cart version 1.3 and every time i try to change the width of each of the individual category sections on the horizontal menu so that it matches the background image size, it will adjust no problem but the flyout part of the menu drops down in the same place it was before i adjusted the size so it is no longer central to the top category and so you can not move down the list because as you move off the top category link to the deeper links the flyout menu disapears.

I have managed a couple of time to get this to work ok in Firefox but unfortunately the modifications that i make are not compatible in internet explorer and the menu system is no longer central as explained above.

Any help would be appreciated

Thanks
Brad

[websightdesign]

I have managed to put the images in to the header style sheet and i have also managed to get the image to change once i move my mouse over the top tab but as soon as i start to move it down the menu for that tab the image reverts back to the normal image, what i would like it to do is to stay the alternate image until i move to the next menu and then change back to the original image.

Here is the code that i have used for the stylesheet if anybody has any ideas i would much appreciate any help.

************************************** STYLESHEET ***********************************

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

/*green*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu {color: #953c15!important;height:22px;background-image:url(./images/button-top-down.gif);}

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

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

div#dropMenu ul {
padding-bottom:2px;
margin: 0;
padding-top:0px;
padding-left:0px;
padding-right:0px;
}

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

div#dropMenu ul.level1 {
background-image:url(./images/Button-Top.gif);
margin:0 auto;
text-align:center;
height:25px;
z-index:1000;
}

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


************************************** STYLESHEET ***********************************


Thanks
Brad