JQuery autocomplete appears behind JQuery menu

[tonyyeb]

Hi guys

Can anyone help with this problem? I have a JQuery autocomplete search box which when displaying the search results in the dropdown window appears behind a JQuery dropdown menu directly below it (see image). I have tried increasing the z-index value of everything I can find in the CSS for the autocomplete search but it still doesn't fix the problem. What else should I be trying?

Fiddle link: http://jsfiddle.net/tonyyeb/LKDBh/18/

Thanks in advance

 

[tonyyeb]

The autocomplete wrapper is being given a z-index of 1 by the jQuery library (hard-coded), whereas the menu (via CSS) has a z-index of 100; easiest solution is to use -

.ui-autocomplete {
    z-index: 100 !important;
}

Give that man a million pounds!! Thank you so much!! I've been banging my head on a brick wall for the past two days over this ha!!

 

[tonyyeb]

Funny you should say that cause I've just removed the !Important and changed the value to 999 and it worked. But I was sure I'd tried that?!!