飛出垂直菜單中重疊的菜單項（Z-Index沒有幫助！）

Question

任何CSS專家都可以幫我弄清楚爲什麼Fly Out垂直菜單項重疊，如截圖所示。我嘗試使用更高的z-index作爲ul，li，菜單包裝等，但無濟於事。

我正在使用Safari。

您可以查看這裏的網站：http://www.octavehotels.com

任何幫助將不勝感激，並可能被視爲自由職業。

感謝&問候

BK蘇茹

的代碼：

飛出垂直菜單的CSS代碼：

/* Define the body style */ 
body { 
} 

/* We remove the margin, padding, and list style of UL and LI components */ 
#menuwrapper ul, #menuwrapper ul li{ 
    list-style:none; 
} 

/* We apply background color and border bottom white and width to 150px */ 
#menuwrapper ul li{ 
    font-family: 'museosans500', Arial, sans-serif; 
    font-size: 14px; 
    text-align: left; 
    -webkit-font-smoothing: antialiased !important; 
    -moz-osx-font-smoothing: grayscale !important; 
    width:143px; 
    padding-left: 7px; 
    margin-bottom: 6px; 
    height:28px; 
    line-height: 27px; 
    cursor:pointer; 
    background-image:url(../images/hotel-btn-bg.png); 

    border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border:#888 1px solid; 

    box-shadow: 1px 2px 6px 0px #222; 
    -webkit-box-shadow: 1px 2px 6px 0px #222; 
    -moz-box-shadow: 1px 2px 6px 0px #222; 
} 

/* We apply the background hover color when user hover the mouse over of the li component */ 
/* for IE < 9 we using class .iehover */ 
#menuwrapper ul li:hover, 
#menuwrapper ul li.iehover{ 
    font-family: 'museosans700', Arial, sans-serif; 
    font-size: 14px; 
    background-color: #ffffff; 
    background-image:none; 
    position:relative; 
} 
#dark-1:hover, #dark-2:hover, #dark-3:hover, #dark-4:hover { 
    -moz-transition: box-shadow 300ms; 
    -webkit-transition: box-shadow 300ms; 
    transition: box-shadow 300ms; 
} 

/* We apply the link style */ 
#menuwrapper ul li a { 
    color:#ffffff; 
    display:block; 
    text-decoration:none; 

} 
#menuwrapper ul li a:hover { 
    color:#111111; 
    display:block; 
    text-decoration:none; 
} 
#menuwrapper ul li:hover > a { 
    color:#111111 !important; 
} 

.dimbackground-curtain { 
} 

#menuwrapper ul .callout { 
    position:absolute !important; 
    bottom:31px; 
    margin-left:-30px; 
    font-size:28px; 
    text-shadow: -7px 4px 10px #333; 
    z-index: 1 !important; 
    display:block; 
    padding-left:10px; 
} 

/**** SECOND LEVEL MENU ****/ 
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */ 
#menuwrapper ul li ul { 
    position:absolute; 
    z-index: 1000; 
    margin-top: -346px; 
    margin-left: 162px; 
    visibility: hidden; 
    opacity:0; 
    filter:alpha(opacity=0); 

    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width. */ 
/* for IE < 9 we using class .iehover */ 
#menuwrapper ul li:hover ul, 
#menuwrapper ul li.iehover ul{ 
    position:absolute; 
    z-index: 1000; 
    visibility: visible; 
    opacity:1; 
    filter:alpha(opacity=100); 
} 

/* we apply different background color to 2nd level menu items */ 
#menuwrapper ul li ul li{ 
    background-color: #ffffff !important; 
    background-image: none; 
    width: 485px; 
    height: 382px; 
    padding: 5px; 
    border:#999 1px solid; 

    -webkit-box-shadow: 0px 8px 50px 2px #000; 
    box-shadow: 0px 8px 50px 2px #000; 
    -moz-box-shadow: 0px 8px 50px 2px #000; 
} 

/* We change the background color for the level 2 submenu when hovering the menu */ 
/* for IE < 9 we using class .iehover */ 
#menuwrapper ul li:hover ul li:hover, 
#menuwrapper ul li.iehover ul li.iehover{ 
} 

/* We style the color of level 2 links */ 
#menuwrapper ul li ul li a{ 
} 

/* Clear float */ 
.clear{ 
    clear:both; 
} 

/* Arrow 1 */ 
#menuwrapper ul li .arrow1 { 
    display: block; 
    font-size:7px; 
    line-height:30px; 
    float:right; 
    padding-right:7px; 
    vertical-align:middle; 
} 
/* Arrow 2 */ 
#menuwrapper ul li .arrow2 { 
    color: #333; 
    font-size:9px; 
    line-height:30px; 
    float:right; 
    padding-right:7px; 
    vertical-align:middle; 
} 
/* Arrow 3 */ 
#menuwrapper ul li .arrow3 { 
    font-size:11px; 
    float:right; 
    padding-right:5px; 
    padding-top:2px; 
    vertical-align:middle; 
} 

.slideshow-wrap { 
    display: table; 
    width: 473px; 
    height: 380px; 
} 
.hotel-img2{ 
    background-image:url(../images/octave-sarjapura.jpg) !important; 
    background-repeat: no-repeat; 
    display: table; 
    width: 473px; 
    height: 369px; 
} 
.hotel-img3{ 
    background-image:url(../images/octave-marathahalli.jpg) !important; 
    background-repeat: no-repeat; 
    display: table; 
    width: 473px; 
    height: 369px; 
} 
.hotel-img4{ 
    background-repeat: no-repeat; 
    display: table; 
    width: 473px; 
    height: 380px; 
} 

.hotel-place { 
    font-family: 'museosans700', Arial, sans-serif; 
    text-shadow: 1px 1px 2px #000000; 
    color: #ffffff; 
    font-size: 14px; 
    display: block; 
    margin-top: -10px; 
    margin-bottom: 10px; 
    letter-spacing: 0.03em; 
    -webkit-font-smoothing: antialiased !important; 
    -moz-osx-font-smoothing: grayscale !important; 
} 
.hotel-title-space { 
    position:absolute; 
    display:table-cell; 
    vertical-align: bottom; 
    width:76.75%; 
    margin-top:-35px; 
    z-index:10002; 
} 
#menuwrapper ul li ul:hover .hotel-title-space { 
    width:77%; !important; 
} 
.hotel-title { 
    position:absolute; 
    display:table-row; 
    font-family: 'museosans500', Arial, sans-serif; 
    color:#fff; 
    font-size: 18px; 
    line-height: 36px; 
    -webkit-font-smoothing: antialiased !important; 
    -moz-osx-font-smoothing: grayscale !important; 
    padding-left:11px; 
    float: left; 
    width:100%; 
    height:35px; 
    background-image:url(../images/hotel-title-bg.png); 
} 
.hotel-link-space { 
    position:absolute; 
    display:table-cell; 
    vertical-align: bottom; 
     width:21.15%; 
     margin-top:-35px; 
     z-index:10002; 
     right:5px; 
} 
#menuwrapper ul li ul:hover .hotel-link-space { 
    right: 4.005px; !important; 
} 
.hotel-link { 
    position:absolute; 
    display:table-row; 
    font-family: 'museosans700', Arial, sans-serif; 
    color:#222222; 
    font-size: 18px; 
    line-height: 36px; 
    -webkit-font-smoothing: antialiased !important; 
    -moz-osx-font-smoothing: grayscale !important; 
    float: left; 
    text-align: right; 
    padding-right:5px; 
     width:100%; 
     height:35px; 
     background-image:url(../images/hotel-link-bg.png); 
} 
.hotel-link:hover { 
    font-family: 'museosans700', Arial, sans-serif; 
    color:#222222; 
    background-color: #ffffff; 
} 

JQuery的暗淡背景JS代碼：

/** 
* Usage: $("<selector>").dimBackground([options] [, callback]); 
* 
* @author Andy Wermke <andy@dev.next-step-software.com> 
* 
*/ 
(function ($) { 
    'use strict'; 

    var dimmedNodes = []; /// [ {$curtain: ?, $nodes: jQueryArray} ] 

    /** 
    * Dim the whole page except for the selected elements. 
    * @param options 
    * Optional. See `$.fn.dimBackground.defaults`. 
    * @param callback 
    * Optional. Called when dimming animation has completed. 
    */ 
    $.fn.dimBackground = function (options, callback) { 
    var params = parseParams(options, callback); 
    options = params.options; 
    callback = params.callback; 

    options = $.extend({}, $.fn.dimBackground.defaults, options); 

    // Initialize curtain 
    var $curtain = $('<div class="dimbackground-curtain"></div>'); 
    $curtain.css({ 
     position: 'fixed', 
     left:  0, 
     top: 0, 
     width: '100%', 
     height: '100%', 
     background: 'black', 
     opacity: 0, 
     zIndex: options.curtainZIndex 
    }); 
    $('body').append($curtain); 

    // Top elements z-indexing 
    this.each(function(){ 
     var $this = $(this); 
     var opts = $.meta ? $.extend({}, options, $this.data()) : options; 

     this._$curtain = $curtain; 
     this._originalPosition = $this.css('position').toLowerCase(); 
     if (this._originalPosition != "absolute" && this._originalPosition != "fixed") { 
     $this.css('position', 'relative'); 
     } 

     this._originalZIndex = $this.css('z-index'); 
     if (this._originalZIndex == "auto" || this._originalZIndex <= opts.curtainZIndex) { 
     $this.css('z-index', opts.curtainZIndex+1); 
     } 
    }); 

    $curtain.stop().animate({opacity: options.darkness}, options.fadeInDuration, callback); 
    dimmedNodes.push({$curtain: $curtain, $nodes: this}); 
    return this; 
    }; 

    /** 
    * Undo the dimming. 
    * @param options 
    * Optional. See `$.fn.dimBackground.defaults`. 
    * @param callback 
    * Optional. Called when "undimming" animation has completed. 
    */ 
    $.fn.undim = function (options, callback) { 
    var params = parseParams(options, callback); 
    options = params.options; 
    callback = params.callback; 
    options = $.extend({}, $.fn.dimBackground.defaults, options); 

    var $curtain; 
    var nodeZIndexMap = []; /// [ [node, originalPosition, originalZIndex], ... ] 
    this.each(function() { 
     var $this = $(this); 
     var opts = $.meta ? $.extend({}, options, $this.data()) : options; 

     if (this._$curtain) { 
     if (!$curtain) { 
      $curtain = this._$curtain; 
     } 
     if (typeof this._originalPosition != "undefined") { 
      nodeZIndexMap.push([this, this._originalPosition, this._originalZIndex]); 
     } 
     this._$curtain = undefined; 
     this._originalPosition = undefined; 
     this._originalZIndex = undefined; 
     } 
    }); 

    if ($curtain) { 
     $curtain.animate({opacity: 0}, options.fadeOutDuration, function() { 
     for (var i=0; i<nodeZIndexMap.length; i++) { 
      var node = nodeZIndexMap[i][0], 
      position = nodeZIndexMap[i][1], 
      zIndex = nodeZIndexMap[i][2]; 
      $(node).css({ 
      position: position, 
      zIndex: zIndex 
      }); 
     } 
     $curtain.remove(); 
     callback(); 
     }); 

     var match; 
     for (var i=0; i<dimmedNodes.length; i++) { 
     var entry = dimmedNodes[i]; 
     if (entry.$curtain == $curtain) { 
      match = i; 
      break; 
     } 
     } 
     if (match) { 
     dimmedNodes = dimmedNodes.slice(0, i).concat(dimmedNodes.slice(i+1)); 
     } 
    } 
    return this; 
    }; 

    /** 
    * Undim all dimmed elements. 
    * @param options 
    * Optional. See `$.fn.dimBackground.defaults`. 
    * @param callback 
    * Optional. Called when all animations have completed. 
    */ 
    $.undim = function (options, callback) { 
     var params = parseParams(options, callback); 
     options = params.options; 
     callback = params.callback; 
     options = $.extend({}, $.fn.dimBackground.defaults, options); 

    var _dimmedNodes = dimmedNodes.slice(); 

    var completed = 0, total = _dimmedNodes.length; 
    for (var i=0; i<dimmedNodes.length; i++) { 
     _dimmedNodes[i].$nodes.undim(options,done); 
    } 

    if (total === 0) { 
     callback(); 
    } 

    function done() { 
     completed++; 
     if (completed == total) { 
     callback(); 
     } 
    } 
    }; 

    // Plugin default options 
    $.fn.dimBackground.defaults = { 
    darkness : 0.75, // 0 means no dimming, 1 means completely dark 
    fadeInDuration : 310, // in ms 
    fadeOutDuration : 300, // in ms 
    curtainZIndex : 999 
    }; 

    /// @return {options:object, callback:function} 
    function parseParams (options, callback) { 
    if (typeof options == "function") { 
     callback = options; 
     options = {}; 
    } 
    if (typeof options != "object") { 
     options = {}; 
    } 
    if (typeof callback != "function") { 
     callback = function() {}; 
    } 

    return { 
     options : options, 
     callback : callback 
    }; 
    } 
}(jQuery)); 

WOW滑塊代碼：

/* 
* generated by WOW Slider 2.5 
* template Elemental 
*/ 

.wowslider-container1 { 
    zoom: 1; 
    position: relative; 
    max-width:485px; 
    margin:0 auto; 
    z-index:100 !important; 
    border:none; 
    text-align:left; /* reset align=center */ 
} 
#menuwrapper ul li .slideshow-wrap { 
    display:none; 
} 
#menuwrapper ul li:hover ul .slideshow-wrap { 
    display:block; 
} 

* html .wowslider-container1{ width:485px } 
.wowslider-container1 ul{ 
    position:relative; 
    width: 10000%; 
    height:auto; 
    left:0; 
    list-style:none; 
    margin:0; 
    padding:0; 
    border-spacing:0; 
    overflow: visible; 
    margin-top: 0px !important; 
    margin-left: 0px !important; 
    /*table-layout:fixed;*/ 

    -webkit-transition: none !important; 
    -moz-transition: none !important; 
    -o-transition: none !important; 
    transition: none !important; 
} 
.wowslider-container1 .ws_images ul li{ 
    width:1%; 
    line-height:0; /*opera*/ 
    float:left; 
    font-size:0; 
    padding:0 0 0 0 !important; 
    margin:0 0 0 0 !important; 

    border:none !important; 

    -webkit-box-shadow: none !important; 
    box-shadow: none !important; 
    -moz-box-shadow: none !important; 
} 

.wowslider-container1 .ws_images{ 
    position: relative; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%; 
    overflow:hidden; 
} 
.wowslider-container1 .ws_images a{ 
    width:100%; 
    display:block; 
    color:transparent; 
} 
.wowslider-container1 img{ 
    max-width: none !important; 
} 
.wowslider-container1 .ws_images img{ 
    width:100%; 
    border:none 0; 
    max-width: none; 
} 
.wowslider-container1 a{ 
    text-decoration: none; 
    outline: none; 
    border: none; 
} 

.wowslider-container1 .ws_bullets { 
    font-size: 0px; 
    float: left; 
    position:absolute; 
    z-index:70; 
} 
.wowslider-container1 .ws_bullets div{ 
    position:relative; 
    float:left; 
} 
.wowslider-container1 a.wsl{ 
    display:none; 
} 

.wowslider-container1 .ws_bullets { 
    padding: 9px; 
} 
.wowslider-container1 .ws_bullets a { 
    width:11px; 
    height:11px; 
    background: url(./bullet.png) left top; 
    float: left; 
    text-indent: -4000px; 
    position:relative; 
    margin-left:5px; 
    color:transparent; 
} 
.wowslider-container1 .ws_bullets a:hover{ 
    background-position: 0 50%; 
} 
.wowslider-container1 .ws_bullets a.ws_selbull{ 
    background-position: 0 100%; 
} 
.wowslider-container1 a.ws_next, .wowslider-container1 a.ws_prev { 
    position:absolute; 
    display:block; 
    bottom:10.5%; 
    margin-top:0; 
    z-index:1001; 
    height: 48px; 
    width: 45px; 
    background-image: url(./arrows.png); 
    background-repeat:no-repeat; 
    opacity: 0.7; 
} 
.wowslider-container1 a.ws_next{ 
    background-position: 100% 10%; 
    right:0.75%; 
} 
.wowslider-container1 a.ws_prev { 
    left:80%; 
    background-position: 0 80%; 
} 
.wowslider-container1 a.ws_next:hover{ 
    opacity: 1; 
} 
.wowslider-container1 a.ws_prev:hover { 
    opacity: 1; 
} 
/* bottom center */ 
.wowslider-container1 .ws_bullets { 
    top: 6px; 
    right: 6px; 
} 

.wowslider-container1 .ws-title{ 
    position:absolute; 
    display:block; 
    bottom: 17px; 
    left: 0px; 
    margin: 9px; 
    margin-left: 0px; 
    margin-right: 9px; 
    padding:8px; 
    background:#FFFFFF; 
    color:#5D5D5D; 
    z-index: 50; 
    font-family:'Open Sans',Arial,Helvetica,sans-serif; 
    font-size: 18px; 
    border-radius:5px; 
    -moz-border-radius:0 10px 10px 0; 
    border-radius:0 10px 10px 0; 
    opacity:0.8; 
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); 
    -moz-box-shadow: 0 0 2px #5D5D5D; 
    box-shadow: 0 0 2px #5D5D5D; 
} 
.wowslider-container1 .ws-title div{ 
    padding-top:5px; 
    font-size: 14px; 
} 
.wowslider-container1 .ws_logo{ 
    position: absolute; 
    left:0; 
    top:0; 
    height: 100%; 
    width: 100%; 
    z-index: 9; 
    background: url(./loading.gif) 50% 50% no-repeat; 
} 
.wowslider-container1 .ws_bulframe img.loading{ 
    margin:39px 35px; 
}.wowslider-container1 .ws_images { 
    border-radius: 4px; 
} 
.wowslider-container1 .ws_effect img{ 
    border-radius: 4px; 
} 
.wowslider-container1 .ws_bullets a img{ 
    text-indent:0; 
    display:block; 
    top:20px; 
    left:-57px; 
    visibility:hidden; 
    position:absolute; 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 
    border: 4px solid #FFF; 
    border-radius:5px; 
    -moz-border-radius:5px; 
    max-width:none; 
} 
.wowslider-container1 .ws_bullets a:hover img{ 
    visibility:visible; 
} 

.wowslider-container1 .ws_bulframe div div{ 
    height:90px; 
    overflow:visible; 
    position:relative; 
} 
.wowslider-container1 .ws_bulframe div { 
    left:0; 
    overflow:hidden; 
    position:relative; 
    width:114px; 
    background-color:#FFF; 
} 
.wowslider-container1 .ws_bullets .ws_bulframe{ 
    display:none; 
    top:18px; 
    overflow:visible; 
    position:absolute; 
    cursor:pointer; 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 
    border: 4px solid #FFF; 
    border-radius:5px; 
    -moz-border-radius:5px; 
} 
.wowslider-container1 .ws_bulframe span{ 
    display:block; 
    position:absolute; 
    top:-10px; 
    margin-left:-6px; 
    left:57px; 
    background:url(./triangle.png); 
    width:15px; 
    height:6px; 
} 

Screenshot 1

2] 3

Answer 1

你在正確的軌道，我相信，只需做的z-index相反的方向。在wowslider上放置更高的z-index，並在列表中放置更低的z-index。

現在你在wowslider上的z-index爲0，在ul上的z-index爲1，所以ul會出現在wowslider的上面。

嘗試了這一點首先

Answer 2

是z-index的幫助我們避免了重複的元素...... 使用的z-index最大的滑動和使用的z-index最小列表項。