CSSMENU vertical: stupid stylesheet question but really not that obv.

[Jack @ PharSide]

Hi all,

I am pretty good with stylesheets but always pull my hair out attempting to customize the mouseover text color of for the dropdown menu in CSSMENU. No matter what I do, the stylesheet will not recognize any other colors other than the main color listed in the main A.

ESSENTIALLY I want the menu to be white with green text. Then on mouseover, have the text and background color change. It seems like it is ONLY inherit with this?? I tried everything prior to posting here. Can you help??

HERE IS WHAT IT LOOKS LIKE:



Here is the CSS:

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
   margin-left: 1px;
   margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {
   /* Fix for Opera 8 */
   /*   overflow: hidden;  */
   background-color: #ffffff;
   border-bottom: 0px solid #ffffff;
   text-align: left;
   width: 100%;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
   width: 200px;
}


/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
   list-style: none;
   margin: 0px;
   padding: 0px;
}
#primary-nav ul {
   position: absolute;
   top: auto;
   display: none;
}
#primary-nav ul ul {
   margin-top: 1px;
   margin-left: -1px;
   left: 100%;
   top: 0px;
}

#primary-nav li {
   margin-left: -1px;
   float: left;
}
#primary-nav li li {
   margin-left: 0px;
   margin-top: -1px;
   float: none;
   position: relative;
}

/* Styling the basic apperance of the menu elements */
#primary-nav a {
   display: block;
   font-weight: bold;
   margin: 0px;
   padding: 5px 10px;
   text-decoration: none;
   color: #7ac142;
   font-size: 11px;
}
#primary-nav li a {
   border-right: 1px solid #7ac142;
   border-left: 1px solid #7ac142;
   border-top: 1px solid #7ac142;
}
#primary-nav li li a {
   border: 1px solid #7ac142;
}
#primary-nav li, #primary-nav li.menuparent {
   background-color: #ffffff;
   color: 7ac142;
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
   background-color: #7ac142;
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
   background-image: url(images/cms/arrow.gif);
   background-position: center right;
   background-repeat: no-repeat;
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
   background-color: #7ac142;

}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
   display: none;
}

/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
   display: block;
}


/* IE Hacks */
#primary-nav li li {
   float: left;
   clear: both;
}
#primary-nav li li a {
   height: 1%;
}

[Dr.CSS]

Try... putting just 'color:' automatically targets the text...

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
  background-color: #7ac142;
  color:#FFF;
}

If you want to target the second level only...

#primary-nav li li a {same as primary-nav a, or diff. up to you, lets say, background:#FFF(white); color:#000(black text)}

#primary-nav li li a:hover {the opposite from above,background:#000; color:#FFF}

[Jack @ PharSide]

Mark, THANKS!

I tried that but just to be safe - tried it again and no change. This is weird. Any other ideas greatly appreciated. Here is what I put there btw - just like you had it.

/* Styling the apperance of menu items on hover */

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
  background-color: #7ac142;
  color: #fff;
}

[Nullig]

Also change:

#primary-nav li.menuactive {
  background-color: #7ac142;
  color: #fff;
}

Nullig

[casidougal]

No matter what I do, the stylesheet will not recognize any other colors other than the main color listed in the main A.

Adding this works for me:

#primary-nav li li a:hover {
color: white;
}

I should add...the only caveat on this is in IE6 if you have any of your content pages/nav items designated as "sectionheaders"..