Support for CSS Flyout Menu

[preman]

body {  
         behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
     margin-top: 0em;
     background-color: #838367;
     width: 95%;
     margin-left: auto;
     margin-right: auto;
     font-weight: bold;
     font-size: 1.0em;
}
div#nav-cat ul {
         margin: 0; 
         padding: 0; 
         width: 100%; 
         background-color: #838367; 
         z-index: 1000;
/*  border: 1px solid #AAA;*/
}

div#nav-cat ul.level2 {background-color: #c65928; width: 180px;}
div#nav-cat ul.level3 {background-color: #c65928;}
div#nav-cat ul.level4 {background-color: #c65928;}
div#nav-cat ul.level5 {background-color: #c65928;}
div#nav-cat ul.level6 {background-color: #c65928;}

div#nav-cat li {
    z-index: 1; 
        position: relative; 
        list-style: none; 
        margin: 0;
    margin-top: 2px; /* change it to whatever space you want to put space between buttons*/
    border-bottom: 1px solid #CCC; /* <---this line may help or hinder IE menu shifting issues */
}
div#nav-cat li li {
    margin: 0; /* this overrides the margin-top in the declaration above */
} 
div#nav-cat li:hover {background-color: #c65928;}
div#nav-cat li.submenu {background-color: #838367;}
div#nav-cat li.submenu:hover {background-color: #c65928;}
div#nav-cat li a {
        display: block; 
        padding: 0.25em 0 0.25em 0.5em;
    text-decoration: none; 
        width: 99%; 
        color: white;
}

div#nav-cat>ul a {
        width: auto;
}

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; 
        background-color: #756783;

This is the coding that i used from a previous post and just changed the colours....

Hi,I don't know how to change the colours, , could u pls give me some advices ?

[ckosloff]

Hi,I don't know how to change the colours, , could u pls give me some advices ?

You just change the hex code in the given example (combination of six letters/numbers after the #).
Google something like "hex color charts", "web safe colors", or the like, and you will find tons of information and visual displays of what each color code displays.

[preman]

You just change the hex code in the given example (combination of six letters/numbers after the #).
Google something like "hex color charts", "web safe colors", or the like, and you will find tons of information and visual displays of what each color code displays.

Thank you very much

[preman]

You just change the hex code in the given example (combination of six letters/numbers after the #).
Google something like "hex color charts", "web safe colors", or the like, and you will find tons of information and visual displays of what each color code displays.

Hi Ckosloff,


I faced a Problem to change the color the same like my template,
pls kindly look my attachment(the left is the one I changed from the CSS FLYOUT, the right one is the original module of my template), I want my CSS FLYOUT has the same color like my template.

This is the CSS content I changed,I think I may made some mistakes in the colours, could you pls help me to figure them out ?
Thank you !


body { behavior: url(includes/csshover.htc);} /* WinIE behavior call */
div#nav-cat {float: left; width: 140px; margin: -1px 0 0 -1px;
background-color: #838367; font-weight:bold;}
div#nav-cat ul {margin: 0; padding: 0; width: 140px; background-color: #838367;
/* border: 1px solid #AAA;*/}
div#nav-cat ul.level2 {background-color: #c65928;}
div#nav-cat ul.level3 {background-color: #c65928;}
div#nav-cat ul.level4 {background-color: #c65928;}
div#nav-cat ul.level5 {background-color: #c65928;}
div#nav-cat li {position: relative; list-style: none; margin: 0;
body {
behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
margin-top: 0em;
background-color: #838367;
width: 95%;
margin-left: auto;
margin-right: auto;
font-weight: bold;
font-size: 1.0em;
}
div#nav-cat ul {
margin: 0;
padding: 0;
width: 100%;
background-color: #838367;
z-index: 1000;
/* border: 1px solid #AAA;*/
}

div#nav-cat ul.level2 {background-color: #c65928; width: 180px;}
div#nav-cat ul.level3 {background-color: #c65928;}
div#nav-cat ul.level4 {background-color: #c65928;}
div#nav-cat ul.level5 {background-color: #c65928;}
div#nav-cat ul.level6 {background-color: #c65928;}

div#nav-cat li {
z-index: 1;
position: relative;
list-style: none;
margin: 0;
margin-top: 2px; /* change it to whatever space you want to put space between buttons*/
border-bottom: 1px solid #CCC; /* <---this line may help or hinder IE menu shifting issues */
}
div#nav-cat li li {
margin: 0; /* this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {background-color: #c65928;}
div#nav-cat li.submenu {background-color: #838367;}
div#nav-cat li.submenu:hover {background-color: #c65928;}
div#nav-cat li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 99%;
color: white;
}

div#nav-cat>ul a {
width: auto;
}

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;
background-color: #756783;
}

[ckosloff]

Hi Ckosloff,
I faced a Problem to change the color the same like my template,
pls kindly look my attachment(the left is the one I changed from the CSS FLYOUT, the right one is the original module of my template), I want my CSS FLYOUT has the same color like my template...

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.