Как добавить класс дочернему тегу при наведении курсора?

Question

[DmitryOxi]

Friends, Help Me :)
Не могу разобраться, как открывать часть меню.
Как добавлять стиль дочкам при наведении мыши на тег-папу.

<div class="metro_header">
  <ul class="main_menu">

    <li class="active selected"><span>1</span>
      <ul style="display: block;">
        <li><a href="#">1.1</a></li>
        <li><a href="#">1.2</a></li>
        <li><a href="#">1.3</a></li>
      </ul>
    </li>

    <li class="active selected"><span>2</span>
      <ul style="display: none;">
        <li><a href="#">2.1</a></li>
        <li><a href="#">2.2</a></li>
        <li><a href="#">2.3</a></li>
      </ul>
    </li>

  <li class="active selected"><span>3</span>
      <ul style="display: none;">
        <li><a href="#">3.1</a></li>
        <li><a href="#">3.2</a></li>
        <li><a href="#">3.3</a></li>
      </ul>
    </li>

пробовал разное, последнее:

<style> 
.metro_header .main_menu li:hover ul {display: block;}
</style>

Подскажите, что делаю не так

Answer 1

[Владислав Черненко]

.metro_header .main_menu li > ul{
    display: none;
}
.metro_header .main_menu li:hover > ul{
    display: block;
}

И уберите стили с ul в самом документе