javascript - 飞出垂直菜单中的重叠菜单项(Z-Index 无济于事!)

Question

任何 CSS 专家都可以帮我弄清楚为什么 Fly Out Vertical Menu 元素重叠，如屏幕截图所示。我尝试对 ul、li、菜单包装器等使用更高的 z-index，但无济于事。

我正在使用 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 Dim 背景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 slider 代码:

    /*
 *  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 帮助我们避免元素重叠...滑动使用 z-index 最大值，列表项使用 z-index 最小值。