Только начинаю знакомиться с jquery да и версткой, собственно, тоже. Сделал дропдаун меню на jquery и следующим блоком слайдер на jquery. Все получилось как и планировалось, но после добавления слайдера, пункты меню (дропдаун) не видны. Видны только первые, которые не попадают в область слайдера.
Пробовал прописать в скрипте z-index таким образом:
$(".menu-items ul li").css({'z-index' : 1000});
и таким образом тоже
$(".menu-items ul").css({'z-index' : 1000});
Подставлял разные значения для z-index, ничего не сработало...
Буду признателен за помощь! Спасибо!
Это html навигации и слайдера.
<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>
А вот css для них
.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;}
Добавьте стили для top-menu
.top-menu {
position: relative; /* важно */
z-index: 1;
}
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости