Oh, I got it. The problem is pretty simple: you color the background of nav element, but its child fills all the background, and the background color of this element (top-level ul) overrides the color according to its class="top-level-menu". In turn, the set of top-level li elements, children of your top-level ul, also fills in all the background space of its parent, so changing its background is also not visible. And only if you change the background of the set of top-level li elements, 'Schedules', 'Job/Locations', 'Workers', 'Rules' and 'Help', you will see the difference in background. For example, you can add another class to each of these li elements.
I understand, it may sound not very optimal, compared to you initial idea to modify the style of only one element, but this just the design you created or used. Anyway, adding a new class for these 5 elements will be the smallest change in this situation. (Anyway, your elements already have a lot of attributes. In particular, why having name attributes if you already have id, and, of course, menu is not in a form, or, in all cases, menu items would not be submitted with some form's data, which would otherwise be the only reason to have name attributes.)
So, this is the simplest immediate fix. I just tried it. Perhaps you can try semi-transparent colors, then background colors of parents could mix with background colors of children. Or you could change the whole design somehow. By the way, you will need a hole lot of style improvements. For example, all items look ugly because their texts are pressed against the left edges of the elements' bounding rectangle, which can be fixed using padding. And so on…
—SA
Submit an article or tip