0

Есть меню, которое состоит из двух списков. Второй список появляется при наведении курсора на элемент первого списка. Есть контекстный селектор вида:

.menu ul li { float: none; }

Этот селектор оставляет выравнивание элементов второго списка по умолчанию (пункты идут один за одним). Мне не ясно, почему этот селектор не влияет на первый список, а влияет только на второй.

<ul class="menu">
    <li><a href="" title="Смартфоны">Смартфоны</a>
      <ul>
        <li><a href="">Айфон</a></li>
        <li><a href="">Самсунг</a></li>
        <li><a href="">Ксяоми</a></li>
      </ul>
    </li>
    <li><a href="">Ноутбуки</a>
      <ul>
        <li><a href="">Апплы</a></li>
        <li><a href="">Самсунги</a></li>
        <li><a href="">Леновы</a></li>
        <li><a href="">Асусы</a></li>
      </ul>
    </li>
    <div class="clear"></div>
  </ul>

CSS:

body {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 14px;
}

.clear {
  clear: both;
}

.menu {
  list-style: none;
  background: #47B3FF;
  width: 1167px;
  margin:auto;
  padding: 0px;
}

.menu li {
  float: left;
}

.menu li:hover {
  background: #3098DF;
}

.menu li a {
  padding: 0 20px;
  text-decoration: none;
  line-height: 65px;
  color: #fff;
}

.menu ul {
  display: none;
  position: absolute;
  list-style: none;
  padding: 0;
}

.menu ul li {
  float: none;
}

.menu li:hover > ul {
  display: block;
  background: #59CC65;
  border-top: 0;
}

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

1 ответ 1

1

В приведенном примере .menu ul li { float: none; } правило описывает только те <li>, которые вложены в <ul>, который сам вложен в элемент с классом .menu.

Таким образом, правило не может влиять на элементы списка <ul> первого уровня. Ведь он сам этот класс .menu и имеет. Он же не "вложен сам в себя".

Надеюсь, что правильно поняла Ваш вопрос. Если что, можете показать тот свой пример, где по-другому.

Ваш ответ

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

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