# Difficulty with webpage css
**URL:** https://boards.straightdope.com/t/difficulty-with-webpage-css/671598
**Category:** Factual Questions
**Created:** [October 18, 2013, 7:28pm UTC](https://boards.straightdope.com/t/difficulty-with-webpage-css/671598 "2013-10-18T19:28:36Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@Saint\_Cad](https://boards.straightdope.com/u/Saint_Cad)
#### Post date: [October 18, 2013, 7:28pm UTC](https://boards.straightdope.com/t/difficulty-with-webpage-css/671598/1 "2013-10-18T19:28:36Z")
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?
---
### Author:  [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)
#### Post date: [October 18, 2013, 8:37pm UTC](https://boards.straightdope.com/t/difficulty-with-webpage-css/671598/2 "2013-10-18T20:37:48Z")
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.
---
### Author:  [@Tim\_T-Bonham.net](https://boards.straightdope.com/u/Tim_T-Bonham.net)
#### Post date: [October 19, 2013, 7:19am UTC](https://boards.straightdope.com/t/difficulty-with-webpage-css/671598/3 "2013-10-19T07:19:24Z")
> [@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’.)
---
### Author:  [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)
#### Post date: [October 19, 2013, 8:52am UTC](https://boards.straightdope.com/t/difficulty-with-webpage-css/671598/4 "2013-10-19T08:52:22Z")
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_
---
### Author:  [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)
#### Post date: [October 19, 2013, 3:15pm UTC](https://boards.straightdope.com/t/difficulty-with-webpage-css/671598/5 "2013-10-19T15:15:03Z")
> [@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.
---
### Author:  [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)
#### Post date: [October 20, 2013, 12:05am UTC](https://boards.straightdope.com/t/difficulty-with-webpage-css/671598/6 "2013-10-20T00:05:09Z")
> [@ZipperJJ](#):
>
> #topmenu must be the ID of a ul
Aha, that’s what I was missing. Fair enough.