Блог

Главная - Вопросы по программированию - Я хочу поместить свой скользящий div за строкой главного меню

Я хочу поместить свой скользящий div за строкой главного меню

#html #css

#HTML #css — код

Вопрос:

Я хочу, чтобы мое мега-меню было похоже на этот веб-сайт https://www.storyblocks.com/stock-image . Я сделал работу почти такой же, как эта, но я не могу поместить div за главное меню. Если я использую z-индекс, я получаю результат, но затем, когда я перемещаю курсор от основной ссылки, он исчезает.

Я попытался изменить z-индекс, и я не знаю, как еще я могу добиться того же результата.

 * {
  margin: 0px;
  padding: 0px;
  list-style: none;
  text-decoration: none;
  color: black;
}

.main-div ul {
  text-align: center;
  background: grey;
  position: relative;
}

.main-div ul li {
  display: inline-block;
}

.main-div ul li a {
  display: block;
  padding: 5px 10px 5px 10px;
}

.main-div ul li:hover a {
  color: white;
}

.sub-menu {
  background: white;
  width: 100%;
  height: 300px;
  left: 0;
  position: absolute;
  display: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: -1;
  /* z-index: -1;<<<this is where I am stuck and don't know what to do*/
}

.main-div ul li:hover .sub-menu {
  display: block;
  animation-name: example;
  animation-duration: 0.3s;
}

@keyframes example {
  from {
    margin-top: -300px;
  }
  to {
    margin-top: 0px;
  }
} 
 <nav class="main-nav">
    <div class="main-div">
        <ul>
            <li>
              <a href="#">T-Shirts</a>
                <div class="sub-menu">
                  <!-- content -->
                </div>
            </li>
            <li>
              <a href="#">Polos</a>
                <div class="sub-menu">
                  <!-- content -->
                </div>
            </li>
            <li>
              <a href="#">Bags</a>
                <div class="sub-menu">
                  <!-- content -->
                </div>
            </li>
            <li>
              <a href="#">Graphics</a>
                <div class="sub-menu">
                  <!-- content -->
                </div>
            </li>
            <li>
              <a href="#">Other Stuff</a>
                <div class="sub-menu">
                  <!-- content -->
                </div>
            </li>
        </ul>
    </div>
</nav>

Комментарии:

1. В соответствии с вашим кодом прямо сейчас, с z-index включенным, sub-menu он появляется при наведении курсора мыши на ссылку и остается, если вы переходите от этой ссылки к sub-menu . Единственный раз, когда он исчезает, — это когда вы наводите курсор от ссылки в другое место. Отправленный вами веб-сайт имеет аналогичную функциональность, тогда чего не хватает?

2. Привет, спасибо за ответ. Если вы измените цвет div .sub-menu на красный и наведете курсор на ссылку. Вы увидите, что div скользит сверху, закрывая текст меню, например, футболку. Поэтому я хочу, чтобы он находился за серым блоком списка заказов ООН. Таким образом, удалив /*comment*/ из z-index .sub-menu, я получаю результат, но после этого я не останусь, когда курсор уйдет из текстового блока главного меню.

3. Также попробуйте переместить курсор в раздел .sub-menu div

4. сохраните его как HTML-файл и откройте его в Chrome, он там не будет работать.

Метки: