[SOLVED] can't change CSSMenu link color

[RyanC]

Hi,
I am using the horizontal CSSMenu. No matter what I do, I cannot alter the link colors. There is an orange color I am using in a div that they are contained in, and they are pulling that orange color. Even when I remove the orange color from the div that contains them, they still pick up the color.

It is the site's H1 color.

I have removed all color references from the CSSMenu style sheet but the links are still picking up this h1/div color.

Can anyone help me with this?
Thanks

[RyanC]

really need help with this.

When I comment out all of this, nothing happens. The menu works the way I want it to except I cannot change the link colors.


/*====having no effect===*/


/*
ul#primary-nav, ul#primary-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
color: black;
}

*/

/*
ul#primary-nav {
color: black;
}

*/


/*
ul#primary-nav ul {
position: absolute;
top: auto;

display: none;
color: black;
}
*/



/*
ul#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
color: black;
}

*/

/*
ul#primary-nav li {
float: left;
margin: 0px;
padding: 0px;
color: black;

}


*/

/*
ul#primary-nav li li a:hover {
margin: 0;
color: black;
}
*/

/*
ul#primary-nav li a.menuactive {
color: black;
}
*/

/*

ul#primary-nav li a.menuactive:hover {
color: black;
font-weight: normal;
}

*/


/*
#primary-nav li li a.menuparent span {
color: black;
display: block;
}

*/

/*
ul#primary-nav li ul a {
text-align: left;
margin: 0px;
position: relative;
padding-left: 6px;
padding-top:3px;
padding-bottom: 3px;
font-weight: normal;

border-top: 0 none;
border-right: 0 none;
border-left: 0 none;
color: white;
}
*/

/*
ul#primary-nav li ul ul {
opacity: 95;
}
*/

[Dr.CSS]

As with most problems in this board it helps to get a link to the site in question, if that is not an option then the HTML/CSS is the next best thing, you may find that one call will cascade (hence the name CSS/cascading style sheets) down to levels below it so if you have a link call in header and your menu links are picking it up try #header #menu li a {color:#000}...

[RyanC]

Thanks for the response.

I figured something is canceling out my ability to change link colors.


The CSS for the orange navigation bar (separate style sheet):

/*========NAVIGATION========*/

#navWrap {
position: absolute;
margin-top: 105px;
}

#navContainer {
float: left;
margin: 0 auto;
z-index: +1;
width: 1060px;
background-color: #ed8d1c;
height: 38px;
}

#navShadow {
position: absolute;
margin-top:93px;
}

#footerShadow {
margin-top: -15px;
position: absolute;
height:15px;
}

.horizShadow {
background-image: url(images/navShadow.png);
width:1060px;
height:65px;
}

#navbar {
margin-top: 7px;
text-transform: uppercase;
/*padding-left: 10px;*/
color: white;

}


#navbar li{
list-style: none;
float: left;
font-size: 11px;
font-family: arial, helvetica, sans-serif;
line-height: 25px;
color: white;
}

#navbar li.baseline {
line-height: 0px;
}

#navbar li a:link, #navbar li a:visited {
display: block;
/*color: black;*/
text-decoration: none;
/*margin-left: 25px;*/
/*font-weight: bolder;*/
color: white;
}

#navbar li a:hover, #navbar li a:active {
display: block;
/*color: white;*/
text-decoration: none;
/*margin-left: 25px;*/
/*font-weight: bolder;*/
color: white;

}

CSS from CSSMENU (modified):

#menu_vert {
margin: 0;
padding: 0;
}




.clearb {
/* needed for some browsers */
clear: both;
}

#menuwrapper {

/* IE6 Hack */
height: 1%;
width: auto;
margin: 0;
padding: 0;
z-Index:+1;
}


li a:link, li a:visited {
color: white;
}

li a:link, li a:visited {
color: black;
}




#primary-nav li li {
width: 220px;
margin-left: 0px;
margin-top: -1px;
position: relative;
color: black;
}

#primary-nav li li {
float: left;
clear: both;
}

#primary-nav li li a {
height: 1%;
}

ul#primary-nav li a {
font-size: 10px;
font-weight: normal;
padding: 0;
display: block;
text-decoration: none;
color: black;
}

ul#primary-nav li a:hover {
background-color: gray;
margin: 0;
color: white;
}


ul#primary-nav li ul {
/*dropdown color*/

background: #ed8d1c;
margin: 0px;
padding: 0px;
position: absolute;
width: auto;
height: auto;
display: none;
position: absolute;
z-index: 999;
opacity: 0.95;

}

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
}
#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;
}

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


/* gif for IE6, as it can't handle transparent png */
* html #primary-nav li li a.menuparent span {
/* set your image here, right arrow, 98% over from the left, 100% or 'right' puts it to far */
/*background: url([[root_url]]/uploads/ngrey/parent.gif) no-repeat 98% center;*/
}


/*====having no effect===*/


/*
ul#primary-nav, ul#primary-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
color: black;
}

*/

/*
ul#primary-nav {
color: black;
}

*/


/*
ul#primary-nav ul {
position: absolute;
top: auto;

display: none;
color: black;
}
*/



/*
ul#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
color: black;
}

*/

/*
ul#primary-nav li {
float: left;
margin: 0px;
padding: 0px;
color: black;

}


*/

/*
ul#primary-nav li li a:hover {
margin: 0;
color: black;
}
*/

/*
ul#primary-nav li a.menuactive {
color: black;
}
*/

/*

ul#primary-nav li a.menuactive:hover {
color: black;
font-weight: normal;
}

*/


/*
#primary-nav li li a.menuparent span {
color: black;
display: block;
}

*/

/*
ul#primary-nav li ul a {
text-align: left;
margin: 0px;
position: relative;
padding-left: 6px;
padding-top:3px;
padding-bottom: 3px;
font-weight: normal;

border-top: 0 none;
border-right: 0 none;
border-left: 0 none;
color: white;
}
*/

/*
ul#primary-nav li ul ul {
opacity: 95;
}
*/

[RyanC]

solved!

After deleting everything in my style sheets one at a time and trying to create new classes, this was the culprit:

ul span {
/*color: #ed8d1c;*/
font-weight: bold;
}