0

Здравствуйте, поясните почему не работает выпадающее меню. HTML

    <nav class="main_navigation">
      <ul class="main_menu">
        <li class="main_menu_item">
          <a href="catalog.html">Каталог</a>
          <ul class="dropdown_menu">
            <li class="dropdown_menu_novelty">
              <a href="#">Новинки</a>
            </li>
            <li>
              <a href="catalog.html">Сливочное</a>
            </li>
            <li class="dropdown_menu_item">
              <a href="#">Щербеты</a>
            </li>
            <li class="dropdown_menu_item">
              <a href="#">Фруктовый лед</a>
            </li>
            <li class="dropdown_menu_item">
              <a href="#">Мелорин</a>
            </li>
          </ul>
        </li>
        <li class="main_menu_item">
          <a href="#">Доставка и оплата</a>
        </li>
        <li class="main_menu_item">
          <a href="#">О Компании</a>
        </li>
      </ul>
    </nav>

СSS:

.main_menu  {
    padding: 0;
    margin: 19px 0 0;
    list-style: none;
    position:relative;
  }
  .dropdown_menu  {
    position:absolute;
    top:20px;
    display: none;
  }
  .main_menu_item:first-of-type > a:hover .dropdown_menu  {
    display: block;
  }     

2 ответа 2

1

Вы забыли +:

.main_menu_item:first-of-type > a:hover + .dropdown_menu  {...}

.dropdown_menu находится не внутри тега a, а после него, поэтому нужно использовать селектор element+element

.main_menu  {
    padding: 0;
    margin: 19px 0 0;
    list-style: none;
    position:relative;
  }
  .dropdown_menu  {
    position:absolute;
    top:20px;
    display: none;
  }
  .main_menu_item:first-of-type > a:hover + .dropdown_menu  {
    display: block;
  }  
   <nav class="main_navigation">
      <ul class="main_menu">
        <li class="main_menu_item">
          <a href="catalog.html">Каталог</a>
          <ul class="dropdown_menu">
            <li class="dropdown_menu_novelty">
              <a href="#">Новинки</a>
            </li>
            <li>
              <a href="catalog.html">Сливочное</a>
            </li>
            <li class="dropdown_menu_item">
              <a href="#">Щербеты</a>
            </li>
            <li class="dropdown_menu_item">
              <a href="#">Фруктовый лед</a>
            </li>
            <li class="dropdown_menu_item">
              <a href="#">Мелорин</a>
            </li>
          </ul>
        </li>
        <li class="main_menu_item">
          <a href="#">Доставка и оплата</a>
        </li>
        <li class="main_menu_item">
          <a href="#">О Компании</a>
        </li>
      </ul>
    </nav>

1
  • Здравствуйте, нет не забыл,я неправильно представлял как все работает,спасибо! 4 мая 2017 в 15:51
1

Я немного извратил ваш CSS и скрыл меню немного по-другому:

* {
  list-style: none;
  text-decoration: none;
}

.main_menu {
  padding: 0;
  margin: 19px 0 0;
  list-style: none;
  font-size: 20px;
}

.dropdown_menu {
  max-width: 200px;
  overflow: hidden;
  height: 0;
}

.main_menu_item:first-of-type:hover .dropdown_menu {
  height: auto;
  overflow: auto;
}
<nav class="main_navigation">
  <ul class="main_menu">
    <li class="main_menu_item">
      <a href="catalog.html">Каталог</a>
      <ul class="dropdown_menu">
        <li class="dropdown_menu_novelty">
          <a href="#">Новинки</a>
        </li>
        <li>
          <a href="catalog.html">Сливочное</a>
        </li>
        <li class="dropdown_menu_item">
          <a href="#">Щербеты</a>
        </li>
        <li class="dropdown_menu_item">
          <a href="#">Фруктовый лед</a>
        </li>
        <li class="dropdown_menu_item">
          <a href="#">Мелорин</a>
        </li>
      </ul>
    </li>
    <li class="main_menu_item">
      <a href="#">Доставка и оплата</a>
    </li>
    <li class="main_menu_item">
      <a href="#">О Компании</a>
    </li>
  </ul>
</nav>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.