Support for CSS Flyout Menu

[preman]

Yep, you are right, I have a test site,with your kind advices,I shall figure out them myself,this is my test site used CHERRY ZEN template www.youtoimport.com
Thank you very much

First thing I noticed is that your CSS is messed up.
For example, there are two body tags, repeated categories, etc.
The first thing I would do is clean up the CSS, you will find plenty examples in the thread on how a CSS should look.
Try pasting one of the "good" CSS onto your test site and check out the looks, it will be easy to take it from there.
You will just need to play around with the hex codes to find which ones you like, or check with the template maker which hex codes they used.
By the way, you do have a test site, right?
If you don't, you need to start there.
My suggestion would be to buy the Zen Cart manual, and build the test site first.

Hi Ckosloff,

I need your help please, how could I change my css flyout style like the AMAZON ? I attached the photo below:

This is my CSS content,could you pls help me to revise it ?

body { behavior: url(includes/csshover.htc);} /* WinIE behavior call */
div#nav-cat {float: left; width: 140px;
background-color: #E8E9E9; font-weight:0;}
div#nav-cat ul {margin: 0; padding: 0; width: 140px; background-color:#E8E9E9;
/* border: 1px solid #E8E9E9;*/}
div#nav-cat ul.level2 {background-color: #E8E9E9;}
div#nav-cat ul.level3 {background-color: #E8E9E9;}
div#nav-cat ul.level4 {background-color: #E8E9E9;}
div#nav-cat ul.level5 {background-color: #E8E9E9;}
div#nav-cat li {position: relative; list-style: none; margin: 0;
/* border-bottom: 1px solid #E8E9E9;*/}
div#nav-cat li:hover {background-color: #E8E9E9;}
div#nav-cat li.submenu {
background: url(../images/submenu.gif) 95% 50% no-repeat;
background-color: #E8E9E9;}
div#nav-cat li.submenu:hover {background-color: #E8E9E9;}
div#nav-cat li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 140px; color: black;}
/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
div#nav-cat>ul a {width: auto;}
div#nav-cat ul ul {position: absolute; top: 0; left: 140px;
display: none;}
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 {display:block;}


Thank you very much !