Как снять выравнивание подменю (CSS)?

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

.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;
}

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