Почему не открывается подменю при наведении курсора мыши?

Question

[Максим Мурга]

HTML:

<ul class="menu">
        <li><a href="#">Главная</a>
          <ul class="sub-menu">
            <li><a href="#">Партфолио</a></li>
            <li><a href="#">Заказчики</a></li>
            <li><a href="#">О сайте</a></li>
          </ul>
        </li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>

CSS:

.menu {
   background: #627c85;
   text-align: center;
}
.menu > li {
   display: inline-block;
   position: relative;
   height: 50px;
   font-size: large;
   margin: 40px 0px 10px 0px;
   float: none;
}
.menu ul > li {
   display: none;
   position: absolute;
   padding: 0;
   font-size: large;
   margin: 0;
   left: 0;
   text-align: left;
   display: inline-block;
}
.menu li a {
   width: 100px;
   text-decoration: none;
   display: block;
   color: white;
   padding: 20px;
   transition: 0.3s linear;
}
.menu a:hover {
   color: #e05a47;
   background-color: black;
}
.sub-menu {
   list-style: none;
   position: absolute;
   display: none;
   margin-top: 0;
   text-align: center;
   float: none;
   background-color: #627c85;
}
.sub-menu a {
   display: block;
}

Я осознаю, что всё криво и я жёстко туплю, так как 'то азы, но видимо я что-то не понял в процессе изучения селекторов..
Подскажите ошибку, пожалуйста.

p.s. hover для подменю я пытался разными способами реализовать, но максимум, что получалось, так это открытое подменю без наведения и подменю при наведении на весь элемент подменю, а не на отдельный раздел меню, поэтому в вопросе в коде CSS не стал его указывать вообще.

Answer 1

[Ярослав Зозуля]

А у тебя нет ни одного правила что б оно открывалось.
Нужно чёт типа
.menu li:hover .submenu {}

а вообще что б не вырисовывать вот такие макаронины, а не селекторы, развесьте классы.
что было типа
.menu-item:hover .submenu {
display: block

}