Пункты dropdown меню не видны из-под слайдера

399
20 февраля 2017, 12:50

Только начинаю знакомиться с 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;}
Answer 1

Добавьте стили для top-menu

.top-menu {
  position: relative; /* важно */
  z-index: 1;
}
READ ALSO
Горизонтальные поля в адаптивном меню

Горизонтальные поля в адаптивном меню

Необходимо ссылкам в адаптивном меню добавить горизонтальный поляКакие единицы измерения выбрать rem/em или %? Как правильно поступить в дальнейшем...

293
Flexbox ширина column внутри row

Flexbox ширина column внутри row

Имеется таблица с прокруткой на flexboxВ первом столбце текст, выходящий за пределы ячейки, скрывается overflow: hidden

283
before и after расширяют родительский блок

before и after расширяют родительский блок

Есть логотип, размером 256х256И есть 2псевдоэлемента before и after, которые увеличивают логотип и при ховрее уменьшают его

315