Support for CSS Flyout Menu

Quote:

---

Originally Posted by cevans73

Thanks Ckosloff for the update...I just noticed the flaw from IE6 and your update works great, thanks for sharing!

One thing, however, that is a little annoying, maybe there's an easy fix...on my menu when you move curser over a link menu, the other links drop down slightly...is there any way to prevent this?

Here is my link......
http://www.bizmug.com/zencart/

Thanks again for your help!
Chris

---

I see what you mean.
When hovering on a cat. that has subcats. then the image becomes slightly bigger in the bottom and displaces the rest of the menu down.
Please note that this doesn't happen with FF, only occurrences are with IE6 and 7.
The answer is that FF is a much more standards-compliant browser.
I am not embarrased to admit that I don't know of a fix for IE, it is a goofy browser, this error happens in my site too.
On the bright side, it is barely noticeable, I wouldn't worry about it.
Better eliminate that blank image in your menu, instructions are in this same thread, just look back a few pages.

My earlier post with instructions on how to dynamically size the flyout menu had a couple of errors!

Sorry about that -- it turned out I missed a couple of additional alterations to the php. For those who are interested, I'm attaching an archive which should be a little easier to work with.

Hello I am trying to figure out if it is possible to use the css flyout menu for categories as well as regular links. What I would like to do is have PRODUCTS as a button and add all my "product categories" in there which makes those subcategories. I got all that working but now I would like to also have like a HOME link Contact Us, and so forth on this same menu. Isn't there a way to accomplish this. I know I have done this with the css flyout menu which went horizontal. I was able to edit the php file but this one is a little different.

The site to look at is

http://www.wpc-consulting.com/~stxmill/

Thanks for the help!

EDIT...

I am trying to get something like this
http://www.thepecanbarn.com/PecanBarnProducts.php

Please note that the site where your solution is implemented is not Zen Cart.
There are many fly-out menus out there, this thread deals specifically with the one designed for ZC.
It would take extensive editing to accomplish what you want in Zen Cart, navigation is simply set a different way in ZC, with sideboxes, etc.
If you can do it, please post here.

I surely don't know how I am very new but I do know that someone was able to help me get my css drop down menu with actual links and it works GREAT. It looks kind of weird on the website now because I am trying to remove it because I would like this on the left side. To check out my css drop down menu in its half way condition go here

http://www.wpc-consulting.com/~stxmill/

Please note that none of the guys posting here are the original author or the last updater.
Both are AWOL.
We are just trying to help each other the best we can.
If someone would like to tackle your problem, be my guest.
I am unable, just wanted you to know that your posts are being read.

If you check out the PHP source of the drop-down CSS menu, you'll notice a place where the author uses the replace function to shift each of the categories listings one level down in the CSS hierarchy. Adapting that PHP and the matching CSS to work horizontally would be the majority of the work. Adding in links to the other parts of the site over or under the categories listing will be relatively straightforward after that.

Quote:

---

Originally Posted by ckosloff

Please note that none of the guys posting here are the original author or the last updater.
Both are AWOL.
We are just trying to help each other the best we can.
If someone would like to tackle your problem, be my guest.
I am unable, just wanted you to know that your posts are being read.

---

I am sorry I am not sure how to do this I wouldn't be able to understand it. However it sounds like you are on the right track. I can't see why the css drop down menu can't just be converted into a vertical menu and put into a sidebox. I mean the css drop down menu I can add everything I need and it works like a charm just by editing the php code which I was able to research and kind of follow what was already there. I have tried this with the vertical css flyout menu but was unsuccessful. Maybe I am missing something. At least I hope so because the client I am working with REALLY wants this menu. If any one has any tips of how i can get this working I would be EXTREMELY THANKFUL. Thanks for the tip Mark I am just too new to even attempt that.

Quote:

---

Originally Posted by welchyboy

I am sorry I am not sure how to do this I wouldn't be able to understand it. However it sounds like you are on the right track. I can't see why the css drop down menu can't just be converted into a vertical menu and put into a sidebox. I mean the css drop down menu I can add everything I need and it works like a charm just by editing the php code which I was able to research and kind of follow what was already there. I have tried this with the vertical css flyout menu but was unsuccessful. Maybe I am missing something. At least I hope so because the client I am working with REALLY wants this menu. If any one has any tips of how i can get this working I would be EXTREMELY THANKFUL. Thanks for the tip Mark I am just too new to even attempt that.

---

I'm pretty new to PHP myself -- honestly it would take me several hours to try and put something like this together (and as you can see from my recent posts, it would take a few tries to get it working smoothly!).

You might consider getting some estimates from a paid coder. Since you know exactly what you're looking for and have all the pieces to the puzzle, it might not be very expensive.

When I say that I am unable I mean that, in my present circumstances, I can't afford to engage in a complicated fix.
There are mods. for sideboxes available in the downloads area, I use Editable Sidebox quite a lot, you can put links in there, disable borders via CSS, etc.
Just a suggestion.

Yeah I am testing out some other things I guess the client won't get everything they want...I have put a blank sidebox on there and added some block test like HISTORY and made it a link. I am messing with that to see how it will look. Then I am thinking of just making the category menu look like this

http://diapercakesmall.com/

What kind of program can do this?

Once I got the categories setup looking nice like that I was going to add the blank box and have additional link "images" there but I am not sure. Not doing too good right now lol.

Where can i go to get experienced coders who could build me a menu that looks similar to this. Even if I have to pay I might have to go that route to get this done and the way the customer likes. Please any one have any suggestions I have wasted half the Saturday looking at other sites and trying to figure out which route to take. Any help is deeply appreciated!

http://www.thepecanbarn.com/index.php

Quote:

---

Originally Posted by cevans73

One thing, however, that is a little annoying, maybe there's an easy fix...on my menu when you move curser over a link menu, the other links drop down slightly...is there any way to prevent this?

---

Yes, you can get rid of it. You need a small border on the bottom of each item, 1px will do it.

And also you seem to need a closing comment marker in the CSS too, which appers to fool IE into working properly, like FF does anyway.

My CSS has been quoted several times in this thread already so I won't quote it again, but if you look through that, you will be able to get it to work properly.

www.wilcodirect.co.uk is proof of this, unless something has gone wrong with it today.....

Quote:

---

Originally Posted by Mark Kidd

I just wanted to say thanks to cmwoods and point out this great contribution from page two of the thread. For those of us who want to get right down to the basics of a CSS flyout menu in order to integrate it with the look and feel of their template, this stylesheet is a much better starting point.

Maybe it could even be included as an alternative in the next release of the contribution.

---

Thank you for your kind comments. In order to get my site working as I liked, a needed to alter the CSS so I tidied it up at the same time. Glad it provided some assistance to you.

NO NEED I got it :smartalec: LOL...Never used that icon before so i thought I would throw it in haha.

I was able to get the links added at the bottom of the css flyout menu by using the same code displayed earlier not sure why it didn't work in the first place...

Code:

---


$content .= '<a href="THE URL">' . 'THE NAME' . '</a>';

---

However I am trying to figure out what type of information i need to put into the stylesheet_categories_menu.css to be able to change the color and size of that link as well. I would like to be able to set different font sizes and colors than the actual menu. Is this possible. Thanks for the great work there is lots of info in this thread!!

The website is

http://www.wpc-consulting.com/~stxmill/

I am having another issue. I have some flash photo galleries on the website and whenever I am on the page and i go to the flyout menu the gallery hides the majority of the menu. Any way of preventing this?

htt://www.wpc-consulting.com/~stxmill/

Also can i disable or change the destination of the "product" link on the menu. For example if someone clicks the actual product button instead of going to a subcategory it will take them to the home page with links at the bottom of the page. How can i change this?

One last thing...I have added multiple links to the bottom of the menu but for some reason they are not going to their own lines. I can not figure out why. I have added a space after the 'Home ' just like that but didn't make a difference. I have spend time researching it but most of the google searches come up to this thread lol. Anyone know how to get this to work?


EDIT...

Sorry just figured out the answer.. adding this piece of code in between each link will create a space.

Code:

---


$content .= '<div id="test">';

---

Can anybody verify that the CSS Flyout Menu works with 1.3.8a? If so is there any modifications that need to be made?

Hello!

Would it be possible to remove the link to the first (top) Category, so basically when my client goes to my category sidebox and puts their curser over 'Ceramic Mugs' (CSS flyout installed) I don't want a link to that, I would want them to just be able to click or link directly to my subcategories, like 'Bistro style' or 'Barrel Style'.

Here is a link to my site...currently you can click on the top category and go to a page that is kind of redundant, so I want to prevent people from clicking on the top parent category link. (so there would be no link on 'Ceramic Mugs')
http://www.bizmug.com/zencart/index....index&cPath=65

I've looked and looked but can't figure it out.

Thanks in advance for any help!
Chris

Quote:

---

Originally Posted by cevans73

Hello!

Would it be possible to remove the link to the first (top) Category, so basically when my client goes to my category sidebox and puts their curser over 'Ceramic Mugs' (CSS flyout installed) I don't want a link to that, I would want them to just be able to click or link directly to my subcategories, like 'Bistro style' or 'Barrel Style'.

Here is a link to my site...currently you can click on the top category and go to a page that is kind of redundant, so I want to prevent people from clicking on the top parent category link. (so there would be no link on 'Ceramic Mugs')
http://www.bizmug.com/zencart/index....index&cPath=65

I've looked and looked but can't figure it out.

Thanks in advance for any help!
Chris

---

That link returns a 404 error

Quote:

---

Originally Posted by jjgtrading

Can anybody verify that the CSS Flyout Menu works with 1.3.8a? If so is there any modifications that need to be made?

---

Answer is yes, it does work.
I suggest that on top of the CSS you put this:
body {
behavior: url(includes/csshover.htc);
/* WinIE behavior call */}
instead of the standard body tag, to address bugs in IE6.
Read the thread for additional tips on CSS and other stuff.

OOPS...here is the link again...

http://www.bizmug.com/zencart/index....index&cPath=65

Hope you can help!
Thanks,
Chris

Quote:

---

Originally Posted by cevans73

OOPS...here is the link again...

http://www.bizmug.com/zencart/index....index&cPath=65

Hope you can help!
Thanks,
Chris

---

I understand what you mean.
However, this is not possible with standard Zen Cart features, because it picks up the category tree dynamically.
You need custom programming for that.
Anyway, the link doesn't look bad, wouldn't worry too much about it.

Yeah, the only reason is that in IE, my wide subcategory pics are going side by side extending my page super wide....in Firefox, it is perfect, but all jacked up in IE....can you see that page in IE what I'm talking about? if so, do you know how to fix it? I had done some tweaking to get rid of the subcat text underneath the pics...but now in IE it's not right.....hmmmm

Thanks!
Chris

Quote:

---

Originally Posted by ckosloff

Answer is yes, it does work.
I suggest that on top of the CSS you put this:
body {
behavior: url(includes/csshover.htc);
/* WinIE behavior call */}
instead of the standard body tag, to address bugs in IE6.
Read the thread for additional tips on CSS and other stuff.

---

Thank you kindly!

Hi all!
After one year working perfectly, i moved to an other server. Now, css flyout menu doesn´t work in ie, working good in firefox. csshover.htc is at /includes folder.
This is my css:

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


I´m running v.1.3.6. Why the files that worked perfectly on my old server doesn´t work now? Any ideas??

nevermind, i figure it out: needed to define de mime type .htc at new server...

Quote:

---

Originally Posted by tonibarcelona

nevermind, i figure it out: needed to define de mime type .htc at new server...

---

Interesting, it's good to publish what you did to resolve, so we will be able to troubleshoot better.
Muy bien, hombre.

Muchas gracias !! :D

For those of you who are interested, there is a new version of csshover.htc. I implemented yesterday, and maybe goes faster than the original... At the web page of the author you can find it (csshover2.htc)

Quote:

---

Originally Posted by tonibarcelona

Muchas gracias !! :D

For those of you who are interested, there is a new version of csshover.htc. I implemented yesterday, and maybe goes faster than the original... At the web page of the author you can find it (csshover2.htc)

---

Please post a link to that, I would like to test it.
Many users have reported problems with IE, let's see if that can help.
Thanks.

Quote:

---

Originally Posted by tonibarcelona

nevermind, i figure it out: needed to define de mime type .htc at new server...

---

could you explain for a noob. i am having the same issue and cannot figure it out. Thanks.

Quote:

---

Originally Posted by Rhitty

could you explain for a noob. i am having the same issue and cannot figure it out. Thanks.

---

OK, can't be simpler than this.
Your webhost should have a Control Panel with an icon for MIME types, just click on that and add .htc.
You can then google MIME types and .htc and read to your heart's content, but this simple fix should take care of it.
Check this out:
http://msdn.microsoft.com/en-us/libr...18(VS.85).aspx

Me again.
It might also be that you need to add htc, without the dot, to your MIME types, check with your webhost.

Hi,

Is there someone that can help me with this problem http://englerogdemoner.no/index.php. part of the page is disappears when installing css flyout menu

Thanks :)

Quote:

---

Originally Posted by ckosloff

Please post a link to that, I would like to test it.
Many users have reported problems with IE, let's see if that can help.
Thanks.

---

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
* Whatever:hover - V2.02.060206 - hover, active & focus
* ------------------------------------------------------------
* (c) 2005 - Peter Nederlof
* Peterned - http://www.xs4all.nl/~peterned/
* License - http://creativecommons.org/licenses/LGPL/2.1/
*
* Whatever:hover is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
*
* Whatever:hover is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* Credits and thanks to:
* Arnoud Berendsen, Martin Reurings, Robert Hanson
*
* howto: body { behavior:url("csshover.htc"); }
* ------------------------------------------------------------
*/
var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'},
onunknown:{on:'onfocus', off:'onblur'}
}
function parseStylesheets() {
if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
window.attachEvent('onunload', unhookHoverEvents);
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}
try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!csshoverReg.test(select) || !style) return;

var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];
var affected = select.replace(/:(hover|active|unknown).*$/, '');
var elements = getElementsBySelect(affected);
if(elements.length == 0) return;
currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}
function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
function hookHoverEvent(node, type, handler) {
node.attachEvent(type, handler);
hoverEvents[hoverEvents.length] = {
node:node, type:type, handler:handler
};
}
function unhookHoverEvents() {
for(var e,i=0; i<hoverEvents.length; i++) {
e = hoverEvents[i];
e.node.detachEvent(e.type, e.handler);
}
}
function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
if(identify) {
var element = doc.getElementById(identify[1]);
return element? [element]:nodes;
}

var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all;
for(var j=0; j<result.length; j++) {
node = result[j];
if(classReg && !classReg.test(node.className)) continue;
nodes[nodes.length] = node;
}
}

return nodes;
}
</script>

Hi,

Is there someone that can someone please help me with this problem http://englerogdemoner.no/index.php. part of the page disappears when installing css flyout menu

Thanks :)

Quote:

---

Originally Posted by Prosone

Hi,

Is there someone that can someone please help me with this problem http://englerogdemoner.no/index.php. part of the page disappears when installing css flyout menu

Thanks :)

---

I read your post but can't help you with the data you are giving me, it is very unusual that a page disappears.
Anyway, to prevent these issues, you should create a local site and test there.
Try uninstalling the mod, and get your site back up and running, we'll take it step by step.

Quote:

---

Originally Posted by ckosloff

Me again.
It might also be that you need to add htc, without the dot, to your MIME types, check with your webhost.

---

i appreciate your assistance. my server company states that the mime htc is there but my flyouts still do not work in i.e.. Any help would make me happy as i have spent countless hours fidgeting with this.

thanks

EDIT: i even copied cswoods css directly to my site and it still did not work :(

Quote:

---

Originally Posted by deserted

Thanks for that, I actually found the answer before I checked back here :)

also I was able to set it just for the CSS flyout menu, using the following in the stylesheet_categories_menu CSS sheet

Code:

---

#nav-cat ul:hover li:hover a:hover {color: #ffffff;
}

---

---

This is almost exactly what I need. How would I make the text white in non-hover mode for just the flyout css category box?

Thanks!

Quote:

---

Originally Posted by JGraphics

This is almost exactly what I need. How would I make the text white in non-hover mode for just the flyout css category box?

Thanks!

---

All these issues can be resolved by the use of a free Firefox extension called Web Developer.
There is something similar for IE, but I don't use it.
In the Web Dev toolbar, select Information --> Display Element Information and click on the desired element, Web Dev displays what it is and then you can manipulate it via CSS.
In this case the element is h3 #categoriescssHeading .leftBoxHeading.
You can use either the main stylesheet in your custom template folder or the categoriescss stylesheet and set the font value to ffffff.
However, this question is very strange, because the box title does not hover, and is usually set to white.

Quote:

---

Originally Posted by Rhitty

i appreciate your assistance. my server company states that the mime htc is there but my flyouts still do not work in i.e.. Any help would make me happy as i have spent countless hours fidgeting with this.

thanks

EDIT: i even copied cswoods css directly to my site and it still did not work :(

---

IE7 does not need htc, it is only for IE6.
Does your site work in IE7?

The CSS flyout categories are working for me except in Internet Explorer, the b1.gif is repeating itself. Any idea how to fix this?

It looks fine in Firefox and Safari browsers.

Thanks

The CSS flyout categories are working for me except in Internet Explorer, the b1.gif image is repeating itself. Any idea how to fix this?

It looks fine in Firefox and Safari browsers.

Thanks

Quote:

---

Originally Posted by ckosloff

IE7 does not need htc, it is only for IE6.
Does your site work in IE7?

---

it does not work in i.e 6 or 7. below is where i am testing. you can see that i directly copied the css which does not flyout.

www.gameroomguys.com/shop

I AM GOING INSANE! :)

Quote:

---

Originally Posted by Rhitty

it does not work in i.e 6 or 7. below is where i am testing. you can see that i directly copied the css which does not flyout.

www.gameroomguys.com/shop

I AM GOING INSANE! :)

---

This website does work in IE7, however not in IE6, which confirms what I said before.
You need to set the path to htc exactly like so:
body {
behavior: url(includes/csshover.htc);
/* WinIE behavior call */}
and of course make sure that csshover.htc is in that folder.
You may also try the new version of csshover (I didn't test yet), which you can find here:
http://www.xs4all.nl/~peterned/htc/csshover2.htc
make sure you add a 2 to your path, if you use it.

Quote:

---

Originally Posted by JGraphics

The CSS flyout categories are working for me except in Internet Explorer, the b1.gif image is repeating itself. Any idea how to fix this?
It looks fine in Firefox and Safari browsers.
Thanks

---

From post #83 in this same thread:
FYI, I did eliminate some errors in IE6 by adding this line:
div#nav-cat li {
background-image: url(../images/b1.gif);
background-repeat: no-repeat;
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
}

Quote:

---

Originally Posted by Rhitty

it does not work in i.e 6 or 7. below is where i am testing. you can see that i directly copied the css which does not flyout.

www.gameroomguys.com/shop

I AM GOING INSANE! :)

---

As our friend above states who has already benefitted from my experience with this mod before,you need to change your behavior line.

At the moment it appears to be referring to a version on your testing own computer and not a file on your server.

This also applies to a background image too...

Quote:

---

Originally Posted by Rhitty

i appreciate your assistance. my server company states that the mime htc is there but my flyouts still do not work in i.e.. Any help would make me happy as i have spent countless hours fidgeting with this.

thanks

EDIT: i even copied cswoods css directly to my site and it still did not work :(

---

The correct MIME type of the .htc file is Text/x-component.
Read this:
http://support.microsoft.com/kb/306231

Is it possible to make a hover over subcategory not clickable. Kind of hard to explain but what I am trying to say is for example I have a link on the css menu called products and when hovered over it has subcategories which when cilcked will go to my product category pages. However if the "Product" link is clicked it will go to the home page and have links to all the subcategory links at the bottom. To see this in action go to this site and click on products in the css menu. I would love to get this where you can not click products.

Site

The behaviour of the menu is right. If you click on "products", you gou tu category 14, with all subcategories at bottom of the page

My template is designed to widen to hole screen width.
Problem is on wide screen monitors.

When clicking on the menu to get sub menu visible the sub menu has too large gap to the root menu.

Problem comes when user moves cursor to the cap to reach the sub menu, the sub menu dissapears.

This is cause menu thinks user is hoovering out of the menu.

Any ideas how to make the gap fixed to small value?

Quote:

---

Originally Posted by tonibarcelona

The behaviour of the menu is right. If you click on "products", you gou tu category 14, with all subcategories at bottom of the page

---

OK Well is there a way to turn this off or disable this feature?

Quote:

---

Originally Posted by welchyboy

OK Well is there a way to turn this off or disable this feature?

---

I don´t understand what do you want to deactivate...

I would like to make the product link not a link. I don't want people to be able to click products and it go to the home page. I would like to get rid of that.

Quote:

---

Originally Posted by welchyboy

I would like to make the product link not a link. I don't want people to be able to click products and it go to the home page. I would like to get rid of that.

---

I understand what you mean, you just want the hover to display the subcats and not be clickable.
The best you can do is leave the description blank, as to not displaying the subcats link, I am not aware that Zen Cart offers that option.

Well darn OK not that big of deal...What about having the products menu and the subcat menu have hover color like the other part of my menu. For some reason I am not able to figure out why all the other links are green before hover and red when hovering over except for the subcats and the actual product link.

Quote:

---

Originally Posted by welchyboy

Well darn OK not that big of deal...What about having the products menu and the subcat menu have hover color like the other part of my menu. For some reason I am not able to figure out why all the other links are green before hover and red when hovering over except for the subcats and the actual product link.

---

You lost me here.
I don't see any difference in color between the links in the menu and all the rest, they all behave the same.
Earlier in this thread there is a style-only menu by Get Em Fast, try experimenting with that one.

OK I will look into that but you don't see how HOME, HISTORY, FUNDRAISER all of them are green and when i hover over the link it turns red. Well when I hover over PRODUCTS in the menu and the subcategory links they don't change color. That is what i was talking about. Just trying to clear it up for you. Sorry about that.

http://www.wpc-consulting.com/~stxmill/

I looked for the post but not sure what style only menu you are talking about. I might be using it already. I have the stylesheet_categories_menu.css. It looks like this

Code:

---


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

/* EXTRA LINKS Background Color  and width */








div#nav-cat {
    margin-top: 0em;
    background-color: #eeff99;
        color: #000000;
    width: 100%;
        height:95%;
        line-height:20px;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    font-size: 1.3em;
}
       

div#nav-cat ul {
        margin: 0;
        padding: 0;
        width: 155px;
        background-color: transparent;
        z-index: 1000;
  /*border: 1px solid #ff0000;*/
}

/*
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: 20;
        position: relative;
        list-style: none;
        margin: 0;
                height: 20px;
                width: 150px;
                /*add border below or above products on the menu*/
               
    margin-top: 0px; /* change it to whatever space you want to put space between buttons*/
    border-bottom: 0px solid #679966; /* <---this line may help or hinder IE menu shifting issues */
        border-top: 0px solid #679966; /* <---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 */
}







/* submenu hover over background color */


/* Products menu background color */
div#nav-cat li.submenu {background-color: #eeff99;}


/* Products menu hover over background color */
div#nav-cat li.submenu:hover {background-color: #eeff99;}

/*padding around product text css menu*/

div#nav-cat li a {
        display: block;
        padding: 0em 0em 0em;
    text-decoration: none;
        width: 160px;
        color: #132e12;
}

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;
               
                /* submenu background color */
        background-color: #eeff99;

---

I have messed with lots of these color numbers and couldn't get it to change the subcategory hover over links or the Product hover over link.

Quote:

---

Originally Posted by welchyboy

OK I will look into that but you don't see how HOME, HISTORY, FUNDRAISER all of them are green and when i hover over the link it turns red. Well when I hover over PRODUCTS in the menu and the subcategory links they don't change color. That is what i was talking about. Just trying to clear it up for you. Sorry about that.

http://www.wpc-consulting.com/~stxmill/

---

I don't see them green, however they do change color, whereas Products and subcats do not.
It is a style issue, I don't have the time to investigate it right now, but the post you are looking for is #32

I still wasn't able to figure out how to make the color hover I was only able to get the background-color which i was able to before. But I guess it will do. Thanks

hi, everyone,

i came across a new problem on css flyout menu, which is very strange.
please do help me to check at www.topalways.com, then go to
Categories->Computers->HDD Enclosures and Storages,

when the subcategory is too long, the rear words "storage" mess with the next subcategory into same line.
in this example, "storage" messes with "USB Hubs"

Could all of you please help me check this for me,? by the way, this problem only appears in IE7&FF3, but work well in IE6.

your suggetion would be great appreciated. thanks.:D

Ive actually had that problem as well. Not sure if i do now but i didn't intentionally do anything to fix it. Anyone have the answer to this because I have also had this issue at one point in time.

Quote:

---

Originally Posted by welchyboy

Ive actually had that problem as well. Not sure if i do now but i didn't intentionally do anything to fix it. Anyone have the answer to this because I have also had this issue at one point in time.

---

hi,welchyboy

sorry to hear that. this kind of problem seems to make me crazy.
if you fix it, please kindly help me to inform me, thanks very much.:cool:

LOL yeah same here. Hopefully someone can help out and get this issue solved. Sure it is a minor tweak.

Hi,

I would like to ask that how to limits of showing sub category in single column?

Say, I have 1 top category and 15 sub categories and each sub categories have 3 sub-sub categories.. so when i mouse over to top level category, sub categories show more then screen limit so have to scroll down and then mouse over again .. i would like to know that if i can do like www.walmart.com ..

Thanks and sorry for my bad English..

Regards

Quote:

---

Originally Posted by Jerry5763837

hi, everyone,

i came across a new problem on css flyout menu, which is very strange.
please do help me to check at www.topalways.com, then go to
Categories->Computers->HDD Enclosures and Storages,

when the subcategory is too long, the rear words "storage" mess with the next subcategory into same line.
in this example, "storage" messes with "USB Hubs"

Could all of you please help me check this for me,? by the way, this problem only appears in IE7&FF3, but work well in IE6.

your suggetion would be great appreciated. thanks.:D

---

@Jerry5763837

Hi, I would like to know that how do u show sub categories in main page.. Yeah Yeah .. I am Newbie .. :blush: heheh

Quote:

---

Originally Posted by khota

@Jerry5763837

Hi, I would like to know that how do u show sub categories in main page.. Yeah Yeah .. I am Newbie .. :blush: heheh

---

hi, there,

you can down load css flyout menu in downlaod area.
good luck.:clap:

Quote:

---

Originally Posted by Jerry5763837

hi, there,

you can down load css flyout menu in downlaod area.
good luck.:clap:

---

Buddy, I have that css flyout menu .. but i am asking about the main page .. under the three pics and then CELL PHONE & DIGITAL CAM as a top category and then sub categories under that .. cuz i am looking this module to show my sub categories on main page ..

Quote:

---

Originally Posted by Jerry5763837

hi, everyone,

i came across a new problem on css flyout menu, which is very strange.
please do help me to check at www.topalways.com, then go to
Categories->Computers->HDD Enclosures and Storages,

when the subcategory is too long, the rear words "storage" mess with the next subcategory into same line.
in this example, "storage" messes with "USB Hubs"

Could all of you please help me check this for me,? by the way, this problem only appears in IE7&FF3, but work well in IE6.

your suggetion would be great appreciated. thanks.:D

---

There is no problem if you read Chinese, just kidding.
This is a style issue, has to do with the width of your subcat, you need to make it bigger, or cut some words to prevent overlapping.
Maybe create another subcat?
I suggest this latter option.
OR
you can look at
div#nav-cat ul.level2 and make the width bigger but it won't look that good.

Quote:

---

Originally Posted by Jerry5763837

hi, everyone,

i came across a new problem on css flyout menu, which is very strange.
please do help me to check at www.topalways.com, then go to
Categories->Computers->HDD Enclosures and Storages,

when the subcategory is too long, the rear words "storage" mess with the next subcategory into same line.
in this example, "storage" messes with "USB Hubs"

Could all of you please help me check this for me,? by the way, this problem only appears in IE7&FF3, but work well in IE6.

your suggetion would be great appreciated. thanks.:D

---

There is no problem if you read Chinese, just kidding.
This is a style issue, has to do with the width of your subcat, you need to make it bigger, or cut some words to prevent overlapping.
Maybe create another subcat?
I suggest this latter option.
OR
you can look at
div#nav-cat ul.level2 and make the width bigger but it won't look that good.

Quote:

---

Originally Posted by khota

Buddy, I have that css flyout menu .. but i am asking about the main page .. under the three pics and then CELL PHONE & DIGITAL CAM as a top category and then sub categories under that .. cuz i am looking this module to show my sub categories on main page ..

---

Menu will display on all your pages, including main.

hi, ckosloff

Anyhow, many thanks for your reply.

Haha, it seems to maker it wider, but it looks ugly, right?

Most srrange is that in IE6 it works well, overlapping in IE7 & FF3.

Appreciated again for your further suggestion.

hi, ckosloff

Sorry for my typing error.
Anyhow, many thanks for your reply.

Haha, it seems okay to make it wider, but it looks ugly, right?

The most strange is that in IE6 it works well, overlapping in IE7 & FF3.

Appreciated again for your further suggestion.

Quote:

---

Originally Posted by welchyboy

LOL yeah same here. Hopefully someone can help out and get this issue solved. Sure it is a minor tweak.

---

He, welchyboy,

did you come up with any idea to solve overlapping CSS categories?
please advise.:D

No I haven't...And what is strange is I haven't really been looking for a solution because in ff3 or ie7 on my computer and many others how i have the menu now it looks great. However I have seen this problem occur on some other computers so I do need to look into it at some point. Sorry.

Hi All,

I have just installed css flyout on 1.3.8 and all seems to be working for me apart from one thing that is propably easy to fix... I have been searching everywhere... In IE7 my categories are only clickable on the text not the entire box (www.truwater.com.au) anyone have a fix?

Thanks in advance

Quote:

---

Originally Posted by gee38l

Hi All,

I have just installed css flyout on 1.3.8 and all seems to be working for me apart from one thing that is propably easy to fix... I have been searching everywhere... In IE7 my categories are only clickable on the text not the entire box (www.truwater.com.au) anyone have a fix?

Thanks in advance

---

There are quirks in IE that we cannot fix, we just have to live with them.
Try this, post #144, maybe the new version of htc can fix it.
Sorry, I don't have time to test now, my site is in trouble with PCI-compliance.

Quote:

---

Originally Posted by ckosloff

There are quirks in IE that we cannot fix, we just have to live with them.
Try this, post #144, maybe the new version of htc can fix it.
Sorry, I don't have time to test now, my site is in trouble with PCI-compliance.

---

Thanks for the reply cklosloff!

I have updated the htc file as per the link but im at work atm and dont have access to a machine with IE7 (using linux) Can anyone test for me?

Quote:

---

Originally Posted by gee38l

Thanks for the reply cklosloff!

I have updated the htc file as per the link but im at work atm and dont have access to a machine with IE7 (using linux) Can anyone test for me?

---

Still not working, but if you are patient enough I will take a look at your files when I have the time. Sorry but hard-pressed now.

Quote:

---

Originally Posted by ckosloff

Still not working, but if you are patient enough I will take a look at your files when I have the time. Sorry but hard-pressed now.

---

Thanks for confirming! Just going insane trying to fix this issue i looked at a few websites linked in previous post and they all seem to be working fine..

Oh and i also copied the coding from a an earlier post #20 and just changed the colours

ckossloff,

Just wondering if you have had a chance to look at my problem?

Thanks,

gee38l

I just noticed that the links in IE6 seem to be working just not IE7... also the link is not the entire box in mozilla, ie6 or safari small part is cut off at the bottom.

Quote:

---

Originally Posted by gee38l

Thanks for the reply cklosloff!

I have updated the htc file as per the link but im at work atm and dont have access to a machine with IE7 (using linux) Can anyone test for me?

---

Hi Gee38l

Could you pls offer me your css Flyout file ? I want my site have the same flyout effect like yours.

Thank you

Quote:

---

Originally Posted by preman

Hi Gee38l

Could you pls offer me your css Flyout file ? I want my site have the same flyout effect like yours.

Thank you

---

HTML Code:

---

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....

Quote:

---

Originally Posted by gee38l

HTML Code:

---

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, :cry:, could u pls give me some advices ?

Quote:

---

Originally Posted by preman

Hi,I don't know how to change the colours, :cry:, 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.

Quote:

---

Originally Posted by ckosloff

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:flex:

Quote:

---

Originally Posted by ckosloff

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;
}

Quote:

---

Originally Posted by preman

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.

Quote:

---

Originally Posted by ckosloff

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.

---

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

Quote:

---

Originally Posted by 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

---

Quote:

---

Originally Posted by ckosloff

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 !

Quote:

---

Originally Posted by preman

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.

Quote:

---

Originally Posted by ckosloff

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

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?

Quote:

---

Originally Posted by 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?

---

in your stylesheet paste this:

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

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

and that should do it.

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.

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 :wink:

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.

Quote:

---

Originally Posted by 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 :wink:

---

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

Quote:

---

Originally Posted by 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.

---

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.