1

У меня есть горизонтальное меню, в котором при наведении на слово categories должно появляться выпадающее меню.

Мой код:

body {
  margin: 0 auto;
  font-family: 'Open Sans', sans-serif;
  padding: 0px;
  margin: 0px;
}

header {
  width: 100%;
}

.navigation ul li {
  list-style: none;
  display: inline-block;
}

ul li a {
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

.navigation ul li a.special {
  color: #b59f5b;
}

ul li.categories:hover>ul.categ_sub {
  display: block;
}

.categ_sub a {
  display: block;
  text-decoration: none;
}

.categ_sub li a {
  display: none;
}
<div class="navigation">
  <ul>
    <li><a href="">home</a></li>
    <li><a href="">features</a></li>
    <li><a class="special" href="">posttypes</a></li>
    <li><a href="">pages</a></li>
    <li><a class="categories" href="">categories</a>
      <ul class="categ_sub">
        <li><a href="">sport</a></li>
        <li><a href="">food</a></li>
        <li><a href="">fashion</a></li>
      </ul>
    </li>
    <li><a href="">contact</a></li>
  </ul>
</div>

Вопрос: почему при наведении на categories не появляется выпадающее меню?

Почему categories стало по уровню выше, чем все остальные пункты меню?

И как это исправить?

Заранее большое спасибо

2 ответа 2

2

body {
  margin: 0 auto;
  font-family: 'Open Sans', sans-serif;
  padding: 0px;
}

.navigation ul li {
  list-style: none;
  display: inline-block;
}

ul li a {
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

.navigation ul li a.special {
  color: #b59f5b;
}

ul li:hover ul.categ_sub {
  display: block;
}

.categ_sub {
  padding: 0;
  display: none;
  position: absolute;
  background: #ddd;
}

.categ_sub li {
  padding: 10px;
  display: block !important;
}
<div class="navigation">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">features</a></li>
    <li><a class="special" href="">posttypes</a></li>
    <li><a href="#">pages</a></li>
    <li>
      <a class="categories" href="">categories</a>
      <ul class="categ_sub">
        <li><a href="#">sport</a></li>
        <li><a href="#">food</a></li>
        <li><a href="#">fashion</a></li>
      </ul>
    </li>
    <li><a href="#">contact</a></li>
  </ul>
</div>

0

Вместо селектора >, который выбирает прямых детей у родителя, вероятно Вам был нужен +, который берет следующий к выбираемому элеменет:

body {
  font-family: "Open Sans", sans-serif;
  padding: 0;
  margin: 0;
}

ul {
  padding: 0;
}

header {
  width: 100%;
}

.navigation > ul > li {
  display: inline-block;
  list-style: none;
}

ul li a {
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

.navigation ul li a.special {
  color: #b59f5b;
}

.categ_sub {
  position: absolute;
  display: none;
}

.categ_sub li {
  display: block;
}

.categories:hover + .categ_sub {
  display: block;
}
<div class="navigation">
  <ul>
    <li><a href="">home</a></li>
    <li><a href="">features</a></li>
    <li><a class="special" href="">posttypes</a></li>
    <li><a href="">pages</a></li>
    <li>
      <a class="categories" href="">categories</a>
      <ul class="categ_sub">
        <li><a href="">sport</a></li>
        <li><a href="">food</a></li>
        <li><a href="">fashion</a></li>
      </ul>
    </li>
    <li><a href="">contact</a></li>
  </ul>
</div>

Если нужно что бы "выпадающее меню" не пропадало, когда курсор перемещается на него (как в первом варианте), то достаточно перевесить hover на родителя:

body {
  font-family: "Open Sans", sans-serif;
  padding: 0;
  margin: 0;
}

ul {
  padding: 0;
}

header {
  width: 100%;
}

.navigation > ul > li {
  display: inline-block;
  list-style: none;
}

ul li a {
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

.navigation ul li a.special {
  color: #b59f5b;
}

.categ_sub {
  position: absolute;
  display: none;
}

.categ_sub li {
  display: block;
}

.wrapper:hover > .categ_sub {
  display: block;
}
<div class="navigation">
  <ul>
    <li><a href="">home</a></li>
    <li><a href="">features</a></li>
    <li><a class="special" href="">posttypes</a></li>
    <li><a href="">pages</a></li>
    <li class="wrapper">
      <a class="categories" href="">categories</a>
      <ul class="categ_sub">
        <li><a href="">sport</a></li>
        <li><a href="">food</a></li>
        <li><a href="">fashion</a></li>
      </ul>
    </li>
    <li><a href="">contact</a></li>
  </ul>
</div>

Ваш ответ

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

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