Support for CSS Flyout Menu

[lolwaut]

Can someone tell me how to change the font color of the submenu items? I figured out how to change the font color of the top-level menu items, and figured out how to change the hover color of the submenu items... but I cant figure out how to change the regular non-hover link color for submenu items. Im using the latest version. Any help is appreciated. Thanks!

nevermind... got it figured out. id post how I did it if I could remember! Thanks all!

[jagall]

try changing the color tag to the color you want in:
div#dropMenu ul.level2 li
div#dropMenu li a
div#dropMenu ul.level2 a

good luck

[lolwaut]

Hello Folks,

I have a new issue now. I have edited the CSS of my menu to my liking, with one exception. I have made my submenu links white on a gray background, while my top-level links are black on a white background. For some reason, any top-level item that has subcategories takes on the regular link color and hover link color OF THE submenus (which is white). This makes my top-level text white on a white background. I DONT want top-level menu items with subcategories to take on the color attributes of my submenu items. I am pulling my hair out here. Using version 1.3.9b.

Here is a link to my site: http://tinyurl.com/3uttrvu
You can see what I'm talking about on the first menu item.... make sure to hover over it.

Here is my customized stylesheet_categories_menu.css... I've made the font red on the submenu items, so you dont have to search too hard.

/*Version 1.3.9b*/
/*Cornflowerblue Menu CSS*/
#categoriescss.leftBoxContainer { 
   background: #fff; 
   border: 1px solid #E6E6E6; 
   width: 150px; 
   padding-bottom: 0px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}

#categoriescssHeading.leftBoxHeading {

   margin-bottom: 0px;
}

#nav-cat {
   width: 150px; 
   margin: 0 0 0 0px;
   background-color: #fff; 
   font-weight:bold;
}

#nav-cat ul {
   margin: 0; 
   padding: 0; 
   width: 150px; 
   background-color: #fff;
}

#nav-cat ul.level2 {background-color: #777777;}
#nav-cat ul.level3 {background-color: #6495ed;}
#nav-cat ul.level4 {background-color: #6495ed;}
#nav-cat ul.level5 {background-color: #6495ed;}
#nav-cat ul.level6 {background-color: #6495ed;}

#nav-cat li {
   position: relative; 
   list-style: none; 
   margin: 0;
   margin-top: 0px; /* change this to put space between buttons*/
   border-bottom: 1px solid #d########3;
}

#nav-cat li li {
   margin: 0; /* overrides the margin-top above */
}
 
#nav-cat li:hover {
   z-index: 1000;
   background-color: #777777;
}

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




#nav-cat li.submenu {
   background: url(../images/arrows/arrow11.png) 99% 50% no-repeat;
   background-color: #fff;
}

#nav-cat li.submenu:hover {
   background: url(../images/arrows/arrow5.png) 99% 50% no-repeat;
}

#nav-cat li.submenu a:hover {
   color: #87ceeb;
}

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


#nav-cat li a {
   display: block; 
   padding: 0.25em 0 0.25em 0.5em;
   text-decoration: none; 
   width: 100%; color: #000;
}

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

#nav-cat ul ul {
   position: absolute; 
   top: 0; 
   left: 150px;
   display: none;
}

#nav-cat ul.level1 li.submenu:hover ul.level2,
#nav-cat ul.level2 li.submenu:hover ul.level3,
#nav-cat ul.level3 li.submenu:hover ul.level4,
#nav-cat ul.level4 li.submenu:hover ul.level5,
#nav-cat ul.level5 li.submenu:hover ul.level6 {
   display:block; 
   border-left: 2px solid #d########3;
}

Any help is very much appreciated!

[gjh42]

The top level list item is named .submenu, so all links in that, including the top link, are affected. Change the rules to

#nav-cat li.submenu ul a {
   color: #fff;
}

#nav-cat li.submenu ul a:hover {
   color: #87ceeb;
}

This will apply only to subcategory links.

Also change the order of the rules so the hover state if active will override the base state.

[lolwaut]

The top level list item is named .submenu, so all links in that, including the top link, are affected. Change the rules to

#nav-cat li.submenu ul a {
   color: #fff;
}

#nav-cat li.submenu ul a:hover {
   color: #87ceeb;
}

This will apply only to subcategory links.

Also change the order of the rules so the hover state if active will override the base state.

Thanks so much! That did it! Very grateful!

[giftcastle5]

Hello I'm trying to use this mod but i don't want all the themeing it has done i would just like to use my original theme and have the categories fly out how would i go about doing that?

[gjh42]

This mod will have different structure and element classes and ids than whatever you have, so you will have to transfer the styling from your current elements to the new ones. You will have to let us see your site live to get specific advice on how to adapt your style rules.

[giftcastle5]

Sure my site is http://perfectcarcorp.net/. I have the categories set up in a way on the left but I would like to use the second categories box on the left as my default since its perfectly themed. Can you help me with that?

[giftcastle5]

Anybody?

[gjh42]

The only real differences between the BetterCategories sidebox and the flyout one is the dividers between items and the bullets (and the font being a wee bit smaller). Do you want those things on the flyout menu? I think the flyout's current state of arrows is better for its functionality that the BC arrows would be.