javascript - Overlapping Menu Items in Fly Out Vertical Menu (Z-Index not helping!) -
can css expert me figure out why fly out vertical menu items overlapping shown in screenshots. tried using higher z-index ul, li, menu wrapper, etc. no avail.
i'm using safari.
you can view website here: http://www.octavehotels.com
any appreciated , may considered freelance jobs.
thanks & regards
bk suru
the codes:
fly out vertical menu css code:
/* define body style */ body { } /* remove margin, padding, , list style of ul , li components */ #menuwrapper ul, #menuwrapper ul li{ list-style:none; } /* apply background color , border bottom white , width 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; } /* apply background hover color when user hover mouse on of li component */ /* ie < 9 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; } /* apply link style */ #menuwrapper ul li { color:#ffffff; display:block; text-decoration:none; } #menuwrapper ul li a:hover { color:#111111; display:block; text-decoration:none; } #menuwrapper ul li:hover > { 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 ****/ /* make position absolute flyout menu , hidden ul until user hover 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: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } /* when user has hovered li item, show ul list applying display:block, note: 150px individual menu width. */ /* ie < 9 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); } /* apply different background color 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; } /* change background color level 2 submenu when hovering menu */ /* ie < 9 using class .iehover */ #menuwrapper ul li:hover ul li:hover, #menuwrapper ul li.iehover ul li.iehover{ } /* style 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 background js code:
/** * usage: $("<selector>").dimbackground([options] [, callback]); * * @author andy wermke <andy@dev.next-step-software.com> * */ (function ($) { 'use strict'; var dimmednodes = []; /// [ {$curtain: ?, $nodes: jqueryarray} ] /** * dim whole page except 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 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 () { (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; (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 dimmed elements. * @param options * optional. see `$.fn.dimbackground.defaults`. * @param callback * optional. called when 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; (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 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 code:
/* * generated 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 { 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 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; } 
yes z-index helping avoid overlapping elements... use z-index maximum sliding , use z-index minimum list item.
Comments
Post a Comment