When hovering a CSS list item, change the parent items CSS

You can not select parent elements in CSS. You'll need javascript/jQuery to accomplish what you want.

CSS3 selectors...

Well, despite what these other answers say, here's kind of a sneaky way of going about it using the adjacent selector.

HTML:

<ul>
    <li>
        <ul>
            <li>Sub Link 1</li>
            <li>Sub Link 2</li>
            <li>Sub Link 3</li>
        </ul>
        <a href="#">Menu</a>
    </li>
</ul>

CSS:

* { 
    margin: 0; 
    padding: 0; }
ul { list-style: none; }
ul > li { position: relative; }
ul li a { 
    height: 16px;
    display: block; }
ul ul { 
    position: absolute;
    top: 16px;
    left: 0;
    cursor: pointer;
    display: none; }
ul li:hover ul { display: block; }
ul ul:hover + a { color: red; }

Preview: http://jsfiddle.net/Wexcode/YZtgL/

Old question, and the accepted answer is clever. But this is pretty trivial to achieve, with just a single change in your CSS from:

#nav-wrapper ul li a:hover

to:

#nav-wrapper ul li:hover>a

This won't work in IE6 (that browser only understands hover styles on anchors). But then nor does the adjacent sibling combinator selector (+).

See this jsFiddle for the fix in action