Support for CSS Flyout Menu

[wotnow]

Thank you very much .. end tab fixed. Dont know how putting a white background would fix the fact that the drop down covers whats underneath.

[first trading]

It would'nt, but there's not a problem with drop downs doing that, just my opinion. I suggested a lighter background for contrast.

You can take those links out though if you wanted.

[wotnow]

Thanks for your support. Waiting for client to decide

[mary4c]

I just installed the CSS Flyout Menu and it doesn't seem to be working. I will have lots and lots of subcategories for each state, so I really need something like this. Are there any detailed instructions besides the read me page? www.southerngenealogybooks.com

[peachblossomhouse]

Hi

I am now sat in my office with a number of PC's and have got your site in IE6 on XPSP2 on show with your CSS on a test installation here too looking similar to how you have it on your live site

Once again, I'm pretty certain your csshover.htc is NOT being found. Change that top line to includes/csshover.htc and ensure the file is present and accessible and not restricted in anyway. I can make your CSS hover work just by changing that line. The relative path is too confusing so lets get rid of it and eliminate it.

If you can confirm that you have done that, I'll continue to sort out the display as it is very similar to the problem I had originally.

HTH

Hi,I 'm a new guy about zencart,Now I haove the same problem about my Css flyout categories,can you tell me how to resolve it ?In your post,you suggest change the top line ,what is that?

[vandiermen]

I just installed the CSS Flyout Menu and it doesn't seem to be working. I will have lots and lots of subcategories for each state, so I really need something like this. Are there any detailed instructions besides the read me page? www.southerngenealogybooks.com

have you enabled it in the admin 'Layout Boxes Controller'
and changed the name of YOUR_TEMPLATE in 2 or 3 places to your template
ALso sometimes the css needs to be remade, I would search this forum for similar questions

[kalys]

Hello

I'm French, so excuse my bad English.

I can not find help on the helpdesk zen cart French, I can therefore vousb ask for help here.

I tried "css flyout menu" and I have a concern with the arrow that starts before any tabs in zen cart home.
The arrow also goes in my pack or stands' css menu flyout But she stood above the class instead of putting his left.

I want:
> Name

But right now I:
>
Name


I just can not color the css script, I'm really sorry

body {  
         behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
     margin-top: 0em;
     background-color: #ffffff;
     width: 236px;
     margin-left: auto;
     margin-right: auto;
     font-weight: bold;
     font-size: 1.3em; width:200px;
	 
}
div#nav-cat ul {
     margin: 0em; 
     padding: 0em; 
       width: 236px;
     z-index: 1000;
     line-height: 14px;
     border: none;
	 
}

div#nav-cat ul.level2 {background-color: #ffffff;}
div#nav-cat ul.level3 {background-color: #ffffff;}
div#nav-cat ul.level4 {background-color: #ffffff;}
div#nav-cat ul.level5 {background-color: #ffffff;}
div#nav-cat ul.level6 {background-color: #ffffff;}

div#nav-cat li {
     z-index: 1; 
     position: relative;
     list-style: none; 
     margin: 0;
     margin-top: 0; /* change it to whatever space you want to put space between buttons*/
     border-bottom: 1px solid black; /* <---this line may help or hinder IE menu shifting issues. */
     background-color: pink; /*Sets background of Menu items that DOES NOT have sub-menu's SYSTEM WIDE!!! */
   
}
div#nav-cat li li {
    margin-left: 0em;/* This puts space between menu and sub-menu, reccomend to leave at 0 unless you have over-lapping problems. */
    background-color: salmon;  /* sets the background of submenu ,WITHOUT submenus, when menu is HOVERED */
} 
div#nav-cat li:hover {background-color: green;} /* sets the HOVER background of any MENU item that DOES NOT have submenu items */
div#nav-cat li.submenu {background-color: blue;} /* sets the background of any menu item that DOES have submenu items */
div#nav-cat li.submenu:hover {background-color: red; width:236px; text-align: width:200px;} /*sets the HOVER background of any menu item that DOES have submenu items */



div#nav-cat li a {background-color: transparent; /*<---This will set the background color of the WHOLE MENU, EVERY LEVEL, SYSTEM WIDE!!! If you want different colors, DON'T CHANGE THIS!!! */
    display: block;
    padding: 0.25em 0 0.3em 0em;
    text-decoration: none; 
    width: 100%;
    color: white; /* sets the font color of the menu, SYSTEM WIDE!! In order to over-ride the font colors for the menu, and have different 
    colors for each level, such as font color changing when you hover, you need to remove any MENU colors  referred to in your
    stylesheet.css, as they over-ride this stylesheet! (includes/templates/YOUR_TEMPLATE/css/stylesheet.css) */
}

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;width:236px;position:absolute; 
}
div#nav-cat ul.level3 li.submenu:hover ul.level4 { height: 200px;overflow: scroll;}

Could you help me please?
Here is my css file stylesheet_categories_menu.css

[mary4c]

have you enabled it in the admin 'Layout Boxes Controller'
and changed the name of YOUR_TEMPLATE in 2 or 3 places to your template
ALso sometimes the css needs to be remade, I would search this forum for similar questions

Thank You! Once I changed it in Layout Boxes Controller it worked. I am still working on the color scheme. Many Thanks!

[bodbod]

Hi all,

i've been working on this quality mod, and am fairly happy with the result, except i've somehow managed to get the submenus to stop acting like block displays in IE. The main menu works when the pointer goes over any part of the blocks, but the submenus are almost impossible to navigate and will frustrate users.

I'm not sure how i've caused this. Works fine in Chrome and Firefox.

If anyone could take a look here

http://www.testuksi.co.uk/catalog/

and let me know how badly i've messed things up it would be greatly appreciated.

Best regards, bod

[bodbod]

Hi all,

i figured it out, had to add the last 'li' that i'd not realised i'd need in this. And bingo.

div#nav-cat ul ul ul li {
   display:block;
   width: 161px;
}

There's still one small glitch though. When the third depth of 'ul' has a submenu too, on mouse over it shows a 2px gap between itself and the next menu item below it. Any idea why? All margins are set to 0px.

Cheers, bod