Dropdown menu & rounded corners

A quick query relating to rounded corners on a dropdown menu.

You can see a sample here: http://jsfiddle.net/tomperkins/C5mTf/

The question relates to the 'Help' button on the right hand side. I've specified for the menu items to have square bottom corners when on hover, which is fine.

The trouble is, I can't get the 'Help' button to have rounded corners on the lower corners?

Got me stumpted, any开发者_如何转开发 help really appreciated.

Thanks in advance,

Tom Perkins

Your problem is this selector:

#menu ul:hover #help

This selects any element with id="help" that is a descendant of a ul being hovered. Since the help menu is itself that ul, this doesn't work.

Switching the selector instead to:

#menu ul#help:hover

fixes the problem. See it here: http://jsfiddle.net/C5mTf/1