0
Я смотрел это меню, но у меня странная проблема, которую я не могу понять, и чувствую себя глупо! Я хочу, чтобы он скользил в качестве меню лотка поверх существующего содержимого. Однако он скользит вниз под содержимым. Я не могу понять, почему это происходит. Помогите?Меню лотка слайд вниз после содержимого
https://jsfiddle.net/ticklishoctopus/gdfv4wzn/
$(window).on('resize', function() {
$('ul.sub-menu').each(function() {
var width = 0;
$(this).children('li').each(function() {
width += $(this).width();
console.log('inner width' + $(this).width());
});
console.log('total width' + width);
$(this).css('padding-left', $(window).width()/2 - width/2);
});
});
$(window).trigger('resize');@import url(https://fonts.googleapis.com/css?family=Cabin);
html,
body {
margin: 0;
padding: 0;
font-family: Cabin, sans-serif;
text-transform: uppercase;
background-color: #ade;
}
.clear {
clear: both;
}
ul,
li {
list-style: none;
text-indent: none;
}
.menu {
width: 100%;
z-index: 50;
display: block;
background: blue;
height: 110px;
margin-top: 0px;
box-sizing: border-box;
background-image: url('images/gradient-line.png');
background-repeat: repeat-x;
background-position: left bottom;
padding-right: 30px;
}
.menu .menu-item {}
.menu .menu-item a {
display: block;
float: left;
font-size: 13pt;
line-height: 64px;
height: 100px;
font-weight: 700;
text-decoration: none;
color: #fff;
padding: 5px 30px;
margin-top: 25px;
}
.menu .menu-item .sub-menu {
position: absolute;
left: 0;
top: -50px;
z-index: -1;
transition: all .5s;
width: 100%;
}
.menu .menu-item .sub-menu li {
display: inline-block;
}
.menu .menu-item:hover .sub-menu {
top: 150px;
}
.menu .menu-item .sub-menu .menu-item a {
text-align: center;
background: rgba(155, 75, 105, .8);
padding: 0 20px;
display: block;
float: left;
color: #ddd;
border: none;
height: 64px;
font-size: 12px;
}
.menu .menu-item .sub-menu .menu-item a:hover {
color: #fff;
}
.menu .menu-item:hover .sub-menu .menu-item a {
height: 64px;
display: block;
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sub-menu {
background-color: #fff;
padding-top: 30px;
padding-bottom: 20px;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<ul class="menu">
<li class="menu-item"><a href="#">MENU 1 <i class="fa fa-sort-desc"></i></a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Mission</a></li>
<li class="menu-item"><a href="#">History</a></li>
<li class="menu-item"><a href="#">News & Conventions</a></li>
<li class="menu-item"><a href="#">Customer Service</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">MENU 2 <i class="fa fa-sort-desc"></i></a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Catalog</a></li>
<li class="menu-item"><a href="#">Sketches</a></li>
<li class="menu-item"><a href="#">Accessories</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">MENU 3 <i class="fa fa-sort-desc"></i></a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Catalog</a></li>
<li class="menu-item"><a href="#">Sketches</a></li>
<li class="menu-item"><a href="#">Accessories</a></li>
</ul>
</li>
</ul>
</header>
<p class="clear"></p>
<main>
Content goes here.
</main>
</body>
Установите z-индекс на дочерние элементы, чтобы они были выше родительского. Похоже, вы только установили z-index на родителя. Дети наследуют этот z-индекс, если вы не намеренно устанавливаете z-индексы для детей. – Korgrue
Изменение этих настроек не похоже на разницу. Может, я что-то упустил? – ticklishoctopus
При дальнейшем просмотре вашего скрипта - кажется, что ваше меню не «позиция: исправлено», но ваше подменю. z-index относительно родителя ТОЛЬКО, если родительский элемент имеет позицию: fixed. В принципе, когда вы выбираете позицию «fixed», вы берете элемент из нормального потока DOM, и в результате z-index не имеет значения вне отношения родительский/дочерний. – Korgrue