DropDownMenu is jumping on mouseover

[rhythmicdevil]

Hello,
I am new to JSF. I am trying to use the component rich:dropDownMenu.
I have placed a border around the element to make it look more like a drop down list by adding a style to the tag like this:

<rich:dropDownMenu style="border:1px solid #959595;" id="products" value="Select An Item" event="onclick">


The issue I am having is when you mouseover the element the bottom border moves up 1pixel and the text "Select An Item" moves up and to the left 1pixel.

I have tried to overwrite the styles in my style sheet.
I have viewed the CSS using Firebug and I cant see anything that would cause this behavior. Any helpful advice would be appreciated.

Thanks.

[rhythmicdevil]

Is just a really easy question that no one wants to answer?

[ilya_shaikovsky]

Styles are differs for overed and not overed elemetns. So you need to explore the classes presents on the component for the both states and controls the properies for both states.

[rhythmicdevil]

That is correct.
The styles for over are:
dr-menu-label
dr-menu-label-select
rich-ddmenu-label
rich-ddmenu-label-select

The styles for not over are:
dr-menu-label
dr-menu-label-unselect
rich-ddmenu-label
rich-ddmenu-label-unselect

I have overwritten both sets of styles in my style sheet but the jumping still happends. If you look on the demo page for rich faces one of the demos does the same thing while the other does not.

Has anyone used this thing without this happening? If so, can you tell me what you did?

Thanks.