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 !

[ckosloff]

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 ?

Hi,
I cannot do the whole testing for you, however I can give you a hint.
Try using negative margins for subcats., like -5, for example, this will push them to the left.
Please bear in mind that this might not display well in IE6.
You will need to test different settings, save a copy of your file if it works and just sweat it out.

[preman]

Hi,
I cannot do the whole testing for you, however I can give you a hint.
Try using negative margins for subcats., like -5, for example, this will push them to the left.
Please bear in mind that this might not display well in IE6.
You will need to test different settings, save a copy of your file if it works and just sweat it out.

Thank you very much

[Best Price Accessori]

Hi,

I have the fly-out menu installed on my site: www.bestpriceaccessories.com

However, I would like the sub menu's text to be default white and then change to #666666 when hover. How could I do that?

[lankeeyankee]

Hi,

I have the fly-out menu installed on my site: www.bestpriceaccessories.com

However, I would like the sub menu's text to be default white and then change to #666666 when hover. How could I do that?

in your stylesheet paste this:

#nav-cat li.submenu {
color:white;
}

#nav-cat li.submenu:hover {
color:#666;
}

and that should do it.

[Best Price Accessori]

Thanks for that but I think I did something wrong.

All my links are now purple!

Sorry if it a dumb question -I'm new to CSS.

[reneberg]

Hi guys

Here it goes..... I have installed SHOW/HIDE categories wich someone said is build upon the CSS Flyout menu.

And i was just wondering if anyone knows if it might be possible to expand the subcategories a little bit slower, sort of ajax style....

It may be possible with categories_css.js

thanx in advance

[e81ny]

Hello everyone,

OK. This is driving me crazy.. I pretty much have it the way I want it. But there is just this little thing that I can't seem to "fix" it.

Please go to this site: http://s266460223.onlinehome.us/shop

On FF and Safari, everything is fine. But on IE (both IE 6 and 7), if you move your cursor from "Lighting" down to "Garden & Outdoor", you will see that the menu shift up and down a little. I've looked at every possible settings..

Can anybody tell me what I missed?

Any help will be appreciated. Thank you in advance.

[ckosloff]

Hi guys
Here it goes..... I have installed SHOW/HIDE categories wich someone said is build upon the CSS Flyout menu.
And i was just wondering if anyone knows if it might be possible to expand the subcategories a little bit slower, sort of ajax style....
It may be possible with categories_css.js
thanx in advance

Sorry, wrong thread, there is an AJAX menu in the downloads area.
Check to see if they have a support thread, they should.

[ckosloff]

Hello everyone,
OK. This is driving me crazy.. I pretty much have it the way I want it. But there is just this little thing that I can't seem to "fix" it.
Please go to this site: http://s266460223.onlinehome.us/shop
On FF and Safari, everything is fine. But on IE (both IE 6 and 7), if you move your cursor from "Lighting" down to "Garden & Outdoor", you will see that the menu shift up and down a little. I've looked at every possible settings..
Can anybody tell me what I missed?
Any help will be appreciated. Thank you in advance.

Checked your site, you didn't miss anything.
It's just the behavior of IE.
My advice is to stop worrying about petty things, nobody will notice.
It is a known bug, recurrent in this thread.