jQuery fadeIn/fadeOut in an Unordered List

Question

I am trying to use jQuery's fadeIn/fadeOut effects on images that are being used as buttons in an unordered list. I want to be able to have the hovered image fade in quickly and out slowly on mouseout. The problem I am having is that I am trying to do this as horizontal menu with floated <li> tags. I created a jsfiddle with as simple of an example as I could. The list in the example contains only 1 list item, but it will actually have 4 or 5.

In order to position the hover images I have created a second <ul> so that it is positioned on top of the other list. What is happening now is that when hovered it does the fadeIn fadeOut twice. I assume that this is happening once for each of the <ul> .

Is there something I can do to position two images on top of each other, within the same <li> ? Or another(better) way altogether to accomplish this? Any help is appreciated.

DEMO

Answer 1

You can get rid of the second <ul> by putting the two images within your #menu1 , and then adding this few properties to your CSS:

#menu1 {
    position: relative;
}

#hovbutton1 {
    position: absolute;
    top: 0;
}

That way you're positioning your hover image in an absolute position relative to its parent, so when shown, it will appear on top of the other one.

Here's the jsFiddle , hope it helps.