Не работают выпадающие списки HTML CSS

Question

У меня не работают выпадающие списки, никак не могу понять в чём трабл. За ранее извините за оформление поста, только зашёл на форум, пока не разобрался.

.menu {
    display: flex;
}

.menu li {
    margin-right: 15px;
    list-style: none;
    position: relative;;
}

.menu a {
    color: #fff;
    text-decoration: none;
    height: 40px;
    line-height: 40px;
    transition: all 0.5s;
}

.menu__text {
    color: #fff;
    transition: linear 0,2s;
}

.menu__text:hover {
    color:yellow;
}


.menu ul {
    display: none;
    float: left;
    position:absolute;
    top: 100%;
    left: 0;
    padding: 0;
}

.menu li:first-of-type:hover + ul{
    display:block;
}

<header class="header">
        <div class="container">
            <div class="header_inner">
                <div class="logo"><p>МИНСКИЙ КОЛЛЕДЖ <br> БИЗНЕСА И ПРАВА </p></div>
                <nav class="nav">
                    <ul class="menu">
                        <li><a href="" class="menu__text">О нас</a></li>
                            <ul>
                                <li><a href="">расписание занятий</a></li>
                                <li><a href="">расписание звонков</a></li>
                            </ul>
                        <li><a href="" class="menu__text">Учащемуся</a></li>
                            <ul>
                                <li><a href="">расписание занятий</a></li>
                                <li><a href="">расписание звонков</a></li>
                            </ul>
                        <li><a href="" class="menu__text">родителям</a></li>
                            <ul>
                                <li><a href="">расписание занятий</a></li>
                                <li><a href="">расписание звонков</a></li>
                            </ul>
                        <li><a href="" class="menu__text">абитуриенту</a></li>
                            <ul>
                                <li><a href="">расписание занятий</a></li>
                                <li><a href="">расписание звонков</a></li>
                            </ul>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

Answer 1

Потому что это непонятно что: (если убрать none, то блок будет позиционироваться в самом низу слева, так как не задано позиционирование у списка )

.menu ul {
display: none;
float: left;
position:absolute;
top: 100%;
left: 0;
padding: 0;

}

хотя бы вот так:

.menu {
  display: flex;
  position: relative;
}

.menu li {
  margin-right: 15px;
  list-style: none;
  position: relative;
  ;
}

.menu a {
  color: #03f;
  text-decoration: none;
  height: 40px;
  line-height: 40px;
  transition: all 0.5s;
}

.menu__text {
  color: #fff;
  transition: linear 0, 2s;
}

.menu__text:hover {
  color: yellow;
}

.menu ul {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
}

.menu li:first-of-type:hover+ul {
  border: 2px solid red;
  display: flex;
}

<header class="header">
  <div class="container">
    <div class="header_inner">
      <div class="logo">
        <p>МИНСКИЙ КОЛЛЕДЖ <br> БИЗНЕСА И ПРАВА </p>
      </div>
      <nav class="nav">
        <ul class="menu">
          <li><a href="" class="menu__text">О нас</a></li>
          <ul>
            <li><a href="">расписание занятий</a></li>
            <li><a href="">расписание звонков</a></li>
          </ul>
          <li><a href="" class="menu__text">Учащемуся</a></li>
          <ul>
            <li><a href="">расписание занятий</a></li>
            <li><a href="">расписание звонков</a></li>
          </ul>
          <li><a href="" class="menu__text">родителям</a></li>
          <ul>
            <li><a href="">расписание занятий</a></li>
            <li><a href="">расписание звонков</a></li>
          </ul>
          <li><a href="" class="menu__text">абитуриенту</a></li>
          <ul>
            <li><a href="">расписание занятий</a></li>
            <li><a href="">расписание звонков</a></li>
          </ul>
        </ul>
      </nav>
    </div>
  </div>
</header>

Answer 2

ul не вкладывается в ul напрямую, читайте документации, внутри ul могут быть только li, а в них уже все что вам надо, в том числе и подменю.

<nav class="nav">
        <ul class="menu">
          <li><a href="" class="menu__text">О нас</a>
              <ul>
                <li><a href="">расписание занятий</a></li>
                <li><a href="">расписание звонков</a></li>
              </ul>
          </li>
          <li><a href="" class="menu__text">Учащемуся</a>
              <ul>
                <li><a href="">расписание занятий</a></li>
                <li><a href="">расписание звонков</a></li>
              </ul>
          </li>
        </ul>
      </nav>

       .menu li ul {     
          display: none;
        }
      .menu li:hover ul {
          border: 2px solid red;
          display: flex;
        }

БЛОГ НА HUSL

Не работают выпадающие списки HTML CSS

Ответы (2 шт):