Question

I am working on a navigation which can be seen here: http://jsfiddle.net/ybvF4/

I’m sure it is against policy to ask two questions in one but my fear is that if I do the solutions may not work together.

The two things I’d like to achieve are:

1. when the drop down menu is hovered I’d like the title line items (“sui generis” and “reclaimed wood”) to have a green background, as they do now, but that fills up to the height of the solid outline that surrounds the navigation.
2. When hovered I’d like the text in the title list item elements to be white, without losing the effect of the current gray color hover state of the sub line items in the list.

I hope I have made this clear it’s pretty tricky to describe in text, please see the jsfiddle link

thanks for any help

Answer 1

when the drop down menu is hovered I’d like the title line items (“sui
generis” and “reclaimed wood”) to have a green background, as they do
now, but that fills up to the height of the solid outline that
surrounds the navigation.

Remove this:

nav .navigation {
    padding-bottom: 5px;
    padding-top: 5px;
}

Then, on .navigation li a, add display: block to allow the padding: 5px; to work as expected.

http://jsfiddle.net/thirtydot/ybvF4/1/

When hovered I’d like the text in the title list item elements to be
white, without losing the effect of the current gray color hover state
of the sub line items in the list.

Add this:

.navigation > li:hover > a {
    color: #fff;
}

http://jsfiddle.net/thirtydot/ybvF4/3/

Of course, then the menu items that don’t have a submenu have a white background and white text on hover. I assume that’s intentional due to the last rule in your CSS.