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;
}
[B]#nav-cat li.submenu a:hover {
color: #87ceeb;
}[/B]
[B]#nav-cat li.submenu a {
color: #fff;
}[/B]
#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!
