Question

I’m building a navigation which has unordered lists within an unordered list. I suspect that styling for the main unordered list is being mixed up with that of the sub list and vise versa. Perhaps my selectors are not the best. The navigation can be seen here: http://jsfiddle.net/W3Dzd/

The two issues that I’m having are that 1) the first line item under “sui generis” is thinner than the others – the rectangle that is that box is displaying differently. 2) when hovered, the sub navigation line item “mantels” anchor text, also under “sui generis” does not change color when hovered over.

Can someone point me int he right direction here? Is there a better selector to use?

Answer 1

The first problem is coming from the rule:

.subnav li:first-child > a {
    padding-bottom: 2.5px;
}

which I don’t understand the purpose of, but removing it fixes the problem.

---

The second problem comes from this rule:

.navigation li:first-child + li + li:hover > a, .navigation li:first-child + li + li + li + li + li + li:hover > a {
    color: white;
}

It is making the “mantels” text stay white because the rules specifies any a which is the direct child of an li which is being hovered over and which is the third or seventh successive li, which has some ancestor, not necessarily a parent who has class navigation. Now, putting a > after .navigation fixes the problem, but I would suggest an alternative:

Instead of giving the ul inside the top-level li a class, put that class on the li itself. Then you can just have the much simpler rules

.navigation li.has-subnav:hover {
    background: #80A353;
}
.navigation li.has-subnav:hover > a {
    color: white;
}

Hope this helps! Oh, also I would consider just using borders to do the separators between the subnav items instead of background images.