Custom UI Element CSS Padding Issues

Question

I have created a custom drop-down element, which is listed on this page:

http://jsfiddle.net/spryno724/2snUH/3/

Click on the drop-down menu in the "Result" secion, and you will see the problem. By rolling over the choices in the expanded drop-down list, you notice the roll-over indicators don't stretch to the available width.

While still maintaining the width of the menu when it was collapsed, how can I stretch the background color of each menu item? I'd also like each of the menu items to remain on their own line. A couple of adjustments that I made the CSS caused some of the list items to wrap their own text.

Thank you for your time.

Answer 1

Use negative margins with width: auto instead of width: 100% for items:

UL.dropdown.open LI {
    margin: 0 -23px 0 -10px;
    padding-right: 23px;
    padding-left: 10px;
    position: relative;
    width: auto;
}

See http://jsfiddle.net/2snUH/4/ .

Or get rid of horizontal padding for UL (and specify horizontal padding for LI instead), and then you will not need negative margins for LI items.