Difficulty with webpage css

[Saint_Cad]

I’m making a dropdown menu system and have this:

#topmenu, #topmenu ul {
list-style:none;
text-align: center;
}

#topmenu li ul {display: none;} /* Hides pulldown, Hidden attribute does not work with IE */

/* Top level menu items */

#topmenu li {
float:left;
width: 250px;
background-color: #000000;
color: #cc5500;
border: 3px solid #cc5500;
}

#topmenu li a:link {
color: #cc5500;
text-decoration: none;
}

/* Reverse colors when hovering whether text or link */
#topmenu li:hover {
background-color: #cc5500;
color: #000000;
}

#topmenu li:hover a:link {
color: #000000;
text-decoration: none;
}

/*****************************************************/

/* Second level /
#topmenu li:hover ul { / Displays pulldowns /
position: relative;
left: -40px; / Lines up under main menu /
display: block;
width: 250px; / Same width as top menu */
}

#topmenu li ul li {
border: 0px;
border-top: 3px solid #cc5500; /* Separates dropdown items */
color: #cc5500;
background-color: #000000;
}

The problem is the links in the dropdowns are always black although they should be orange. I thought maybe the error was that the color #cc5500 in “li a:link” didn’t descend (I don’t know why it wouldn’t) so I added this:

#topmenu li ul li a:link {
color: #cc5500;
text-decoration: none;
}

to no effect. However, when I added

#topmenu li:hover ul li a:link {
color: #cc5500;
text-decoration: none;
}

I get exactly what I want.

So why won’t the menu links display in orange without the :hover added to the top row li?

[ZipperJJ]

Because the second menu is a property of li:hover not just li? If you look at the code for the parent item, the ul, it also is a property of li:hover.

[Tim_T-Bonham.net]

@Saint_Cad

The problem is the links in the dropdowns are always black although they should be orange. I thought maybe the error was that the color #cc5500 in “li a:link” didn’t descend (I don’t know why it wouldn’t)…

Using color names like ‘black’ or ‘orange’ is better coding practice – it would make your code more understandable. (Though that color is closer to ‘IndianRed’.)

[GuanoLad]

There’s something about #topmenu li ul that seems wrong to me. ul should be before li, even if it’s a hierarchical menu. I think. Maybe.

In any case, this is usually the kind of thing I use !important for.

Here’s a cool and unrelated thing - if you’re using the colour codes that are double characters for each of R, G, and B, such as #cc5500, you can reduce it down to just three and it will still work: #c50

[ZipperJJ]

@GuanoLad

There’s something about #topmenu li ul that seems wrong to me. ul should be before li, even if it’s a hierarchical menu. I think. Maybe.

#topmenu must be the ID of a ul, and that CSS is addressing li’s within it that have ul’s within them that have li’s within them.

It’d be weird if it was ul li li like you’re thinking.

[GuanoLad]

@ZipperJJ

#topmenu must be the ID of a ul

Aha, that’s what I was missing. Fair enough.