customizing the drop down autocomplete box

Question

I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.

I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.

I'v based mine off this one.

<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">

Answer 1

In order to avoid using !important you could add your styles with jQuery and override them in that way.

$('ul.ui-autocomplete').css({
    color: 'red'
});

Another solution would be to remove the style attribute from the ul.

$('ul.ui-autocomplete').removeAttr('style');