Just starting to get acquainted with jquery and the layout, in fact, too. Made a dropdown menu on jquery and the next block slider on jquery. Everything turned out as planned, but after adding a slider, menu items (dropdown) are not visible. Only the first are visible, which do not fall into the slider area.
I tried to register in the script z-index as follows:
$(".menu-items ul li").css({'z-index' : 1000}); and so too
$(".menu-items ul").css({'z-index' : 1000}); Substitute different values for z-index , nothing worked ...
I would appreciate the help! Thank!
This is html navigation and slider.
<nav class="top-menu"> <ul class="menu-items"> <li class="item"><a class="item-a" href="#">О Компании</a></li> <li class="item"><a class="item-a" href="#">Сотрудничество</a> <ul> <li><a href="#">Инжиниринг</a></li> <li><a href="#">Генподряд</a></li> <li><a href="#">Комплектация обьектов</a></li> <li><a href="#">Продажа котельного обоорудования</a></li> <li><a href="#">Строительство котельных</a></li> </ul> </li> <li class="item"><a class="item-a" href="#">Наши обьекты</a></li> <li class="item"><a class="item-a" href="#">Инвесторам</a> <ul> <li><a href="#">Сертификаты</a></li> <li><a href="#">Расчет стоимости строительства</a></li> </ul> </li> <li class="item"><a class="item-a" href="#">Контакты</a></li> </ul> </nav> <div class="main_view"> <div class="window"> <div class="image_reel"> <img src="slider_arma/constr_service.jpg"> <img src="slider_arma/constr_management.jpg"> <img src="slider_arma/Industrial_boiler.jpg"> </div> </div> <div class="paging"> <a href="#" rel="1">1</a> <a href="#" rel="2">2</a> <a href="#" rel="3">3</a> </div> </div> But css for them
.menu-items{ display:inline; width:auto; } .menu-items ul { position:absolute; top:88px; width:130px; background:#fff; display:none; margin:0; padding:7px 0; list-style:none; border-radius:3px; border:1px solid rgba(0, 0, 0, 0.2); box-shadow:0 0 5px rgba(0, 0, 0, 0.2); } .menu-items ul:after{ content: ""; width:0; height:0; position:absolute; bottom:100%; left:8px; border-width:0 8px 8px 8px; border-style:solid; border-color:#fff transparent; } .menu-items ul:before{ content:""; width:0; height:0; position:absolute; bottom:100%; left:4px; border-width:0 10px 10px 10px; border-style:solid; border-color:rgba(0, 0, 0, 0.1) transparent; } .menu-items ul li{ display:block; width:100%; font-size:0.9em; text-shadow:1px 1px 0 #fff; } .menu-items ul li a{ display:block; width:100%; padding:6px 7px; line-height:1.4em; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; text-decoration:none; color:rgba(12, 12, 12, 0.92); } .menu-items ul li a:hover{ color:rgba(19, 19, 204, 0.73); } .item{ float:right; padding:0% 1%; } .item-a{ text-decoration:none; color:rgba(12, 12, 12, 0.92); } .item-a:hover{ color:rgba(19, 19, 204, 0.73); transition:0.3s; } /* Стили слайдера */ .main_view { float: left; position: relative; } /*--Window/Masking Стили--*/ .window { height:460px; width:1360px; overflow: hidden; /*--Прячет все за пределами width/height--*/ position: relative; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img {float: left;} /*--Paging Стили--*/ .paging { position: absolute; bottom: 40px; right: -7px; width: 178px; height:47px; z-index: 100; /*--кнопки смены слайдов поверх изображения--*/ text-align: center; line-height: 40px; background: url(paging_bg2.png) no-repeat; display: none; /*--Спрятано по умолчанию, потом будет показано с помощью jQuery--*/ } .paging a { padding: 5px; text-decoration: none; color: #fff; } .paging a.active { font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } .paging a:hover {font-weight: bold;} 
