как я могу показать контейнер подменю при наведении

#html #css #nav #submenu #megamenu

#HTML #css #навигация #подменю #megamenu

Вопрос:

Как я могу сделать так, чтобы при наведении курсора мыши на пункт меню 2 отображался контейнер подменю?

Нужно ли мне что-то добавлять в тег LI или A? Я пробовал

 ul li a:hover .submenu-container {
    display: block;
}

но это не сработало

  <ul>
    <li>
        <a href="#">Menu 1</a>
    </li>
    <li>
        <a href="#">Menu 2</a>
    </li>        

 </ul>
 <div class="submenu-container">
    <ul class="Sub-Menu">
           <h3>SubMenu 1</h3>
       <li>
           <a href="#">Sub-Menu 1</a>
       </li>
       <li>
           <a href="#">Sub-Menu 2</a>
       </li>        
    </ul>



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.submenu-container {
    padding: 50px 20px;
    background-color: red;
    display: none;
}

ul {
    list-style: none;
}

ul li {
    margin: 10px 0;
}

ul li a {
    text-decoration: none;
    display: block;
    font-size: 1.2rem;
}

Ваши идеи приветствуются.

Большое спасибо

Пол

1. a:hover .submenu-container при этом выбирается элемент с классом .submenu-container , который находится внутри a элемента, поэтому вам нужно поместить выпадающий список в a тег, чтобы изменить его таким образом при наведении

2. Итак, как мне отобразить контейнер подменю?

3. Прежде всего, ваш css для контейнера подменю содержит два свойства отображения.

4. это решено, но спасибо, что указали на это.

Ответ №1:

Я бы организовал так, чтобы div подменю находился внутри меню 2 li и добавил:

 ul li:hover .submenu-container {
  display: block;
}

Смотрите полный рабочий пример здесь:

     * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    .submenu-container {
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 50px 20px;
        background-color: red;
        display: none;
    }
ul li:hover .submenu-container {
  display: block;
}
    
    ul {
        list-style: none;
    }
    
    ul li {
        margin: 10px 0;
    }
    
    ul li a {
        text-decoration: none;
        display: block;
        font-size: 1.2rem;
    }

 <div class=wrap>    

<ul>
        <li>
            <a href="#">Menu 1</a>
        </li>
        <li>
            <a href="#">Menu 2</a>
          <div class="submenu-container">
        <ul class="Sub-Menu">
            <h3>SubMenu 1</h3>
        <li>
            <a href="#">Sub-Menu 1</a>
        </li>
        <li>
            <a href="#">Sub-Menu 2</a>
        </li>        
    </ul>
  </div>
        </li>        
    </ul>

  </div>

Развернуть фрагмент

Ответ №2:

Я изменил ваш css-селектор на ul li:hover .submenu-container , а затем переместил ваше подменю так, чтобы оно находилось внутри li с помощью селектора наведения

 * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.submenu-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 50px 20px;
    background-color: red;
    display: none;
}

ul {
    list-style: none;
}

ul li {
    margin: 10px 0;
}

ul li a {
    text-decoration: none;
    display: block;
    font-size: 1.2rem;
}

ul li:hover .submenu-container {
    display: block;
}

 <ul>
  <li>
    <a href="#">Menu 1</a>
  </li>
  <li>
    <a href="#">Menu 2</a>
    <div class="submenu-container">
      <ul class="Sub-Menu">
        <h3>SubMenu 1</h3>
        <li>
          <a href="#">Sub-Menu 1</a>
        </li>
        <li>
          <a href="#">Sub-Menu 2</a>
        </li>
      </ul>
    </div>
  </li>

</ul>

Развернуть фрагмент

1. Это единственный вид работ, ваше подменю исчезает при попытке навести на него курсор. Смотрите мой ответ о том, как правильно это сделать.

2. спасибо, ваш бы сработал, если бы вы не использовали символ . С символом я не могу зайти в свое подменю, например, он исчезает, когда я выхожу из меню 2

3. Да, вы правы, я отредактировал ответ