Help with drop down menu

[rachella]

1) Script Title:
AnyLink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem:

Having trouble changing the link colors. It works in IE (except the hover background color change-- it won't change when hovering). It doesn't work correctly in NS or FF (although the hover color does). It works perfectly in Opera.

This is what it's suppose to look like (how it's previewing in my editor) and what I'm getting in NS & FF.



This is what I've changed the CSS section of the code to. (I've replaced the "white" at the end of the section with the hex code and it gets the same result either way.)


Many thanks for any help!

Rachel

[jscheuer1]

Get rid of all that selecter:psuedo-class {property:value} and selecter.class:psuedo-class {property:value} crud (it doesn't do anything useful and may be causing problems) and see if that helps. Also, try putting your code in the message so we can quote it.

[rachella]

I put that in after it didn't work at all without it...

Here's the code...

<style type="text/css">

selectorseudo-class {property: value}
selector.classseudo-class {property: value}

#dropmenudiv { color: #5f5b56; position: absolute; border-style: solid; border-width: 1px 1px 0; border-color: black; a: link {color: #4A4747 } /* unvisited link */
a:visited {color: #4A4747} /* visited link */
a:hover {color: #4A4747} /* mouse over link */
a:active {color: #4A4747} /* selected link */
background-color: #BDC1BD;
text-decoration: none;
font: 12px monotype cursiva;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
a:link {color: #4A4747} /* unvisited link */
a:visited {color: #4A4747} /* visited link */
a:hover {color: #4A4747} /* mouse over link */
a:active {color: #4A4747} /* selected link */
background-color: #BDC1BD;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #ffffff;
}

</style>

[jscheuer1]

Now that I can see it better I see some big problems. You have selectors with their rules (red in the below) inside of other selectors with rules. This produces style that no browser can really understand:

#dropmenudiv { color: #5f5b56; position: absolute; border-style: solid; border-width: 1px 1px 0; border-color: black; a: link {color: #4A4747 } /* unvisited link */
a:visited {color: #4A4747} /* visited link */
a:hover {color: #4A4747} /* mouse over link */
a:active {color: #4A4747} /* selected link */
background-color: #BDC1BD;
text-decoration: none;
font: 12px monotype cursiva;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
a:link {color: #4A4747} /* unvisited link */
a:visited {color: #4A4747} /* visited link */
a:hover {color: #4A4747} /* mouse over link */
a:active {color: #4A4747} /* selected link */
background-color: #BDC1BD;
text-decoration: none;
font-weight: bold;
}

Try this out, it looks to be what you intended, as far as I can tell:

<style type="text/css">

#dropmenudiv { color: #5f5b56; position: absolute; border-style: solid; border-width: 1px 1px 0; border-color: black; 
background-color: #BDC1BD;
text-decoration: none;
font: 12px monotype cursiva;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
background-color: #BDC1BD;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:link {color: #4A4747} /* unvisited link */
#dropmenudiv a:visited {color: #4A4747} /* visited link */
#dropmenudiv a:hover {color: #4A4747} /* mouse over link */
#dropmenudiv a:active {color: #4A4747} /* selected link */

#dropmenudiv a:hover{ /*hover background color*/
background-color: #ffffff;
}

</style>

[rachella]

John, thanks so much. That makes sense.

It's fixed the drop down part entirely in all 4 browsers. But in NS & FF the menu items are still blue. Any suggestions for that?



Thanks again!
Rachel

[jscheuer1]

Those can probably be considered as normal links on the page. If so, adding this to the end of the style section:

a:link {color: #4A4747} /* unvisited link */
a:visited {color: #4A4747} /* visited link */
a:hover {color: #4A4747} /* mouse over link */
a:active {color: #4A4747} /* selected link */

will take care of it. Otherwise, they will need to be assigned a class name or id names if they do not have one/them and accessed via that/those or a selector composed from a containing element. There are various ways that this can be done so, let's first see if the above takes care of it to your satisfaction.

[rachella]

Hi John,

That didn't work out... entirely. But it lead me to something that did; I put the code at the end of both that style section and at the end of the no text decoration script and together it fixed the problem in all the testing browsers.

Thanks so much for your help!

Cheers,
Rachel