固定顶部栏中的菜单

Question

I have a web page having fixed top header in which a drop down jQuery menu is placed. I put a banner image just below this fixed header. My problem is the menu sub items that are just above the image are appearing behind the image. Also the menu gets closed when mouse move out of the fixed header for those menu items which do not appear above the image. Here is the link of the files: http://www.filedropper.com/projectv5210

I am sorry for not creating a fiddle as the code is big and not putting here because I always have issues writing codes here, I am new to this site. Please help. Thanks in advance!

[Edited]

Thanks for the quick responses. I have a another issue with the jQuery menu. I want to grow the menu to another level. I mean I want to open another sub menu when hovering mouse on the menu sub items.

Please let me know if I need to start a new thread for this.

Answer 1

#navigation{
    z-index: 9999;
}

Answer 2

只需为菜单放置比 css 中的图像更大的 z-index。

Answer 3

You should start playing with z-index, http://www.w3schools.com/cssref/pr_pos_z-index.asp

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

So, if the slideshow's z-index is less than the navigation, the slideshow will be stacked below the navigation, and vice verse. so you might add:

#slideshow {
    z-index: -1;
}

    /* Or */

#navigation {
    z-index: 999;
}

    /* Or */

#slideshow {
    z-index: 0;
}
#navigation {
    z-index: 1;
}

The second one makes the #navigation menu higher than most of the page's elements.