воженное меню

by Ksenia Polyakova

HTML

<div class="nav">
  <ul class="level1">
    <li class="level1__item">
      <div class="tt"></div>one
      <ul class="level2">
        <li class="level2__item">1</li>
        <li class="level2__item">2</li>
        <li class="level2__item">3</li>
        <li class="level2__item">4</li>
      </ul>
    </li>
    <li class="level1__item">
      two
      <ul class="level2">
        <li class="level2__item">1</li>
        <li class="level2__item">2</li>
        <li class="level2__item">3</li>
        <li class="level2__item">4</li>
      </ul>
    </li>
    <li class="level1__item">
      three
      <ul class="level2">
        <li class="level2__item">1</li>
        <li class="level2__item">2</li>
        <li class="level2__item">3</li>
        <li class="level2__item">4</li>
      </ul>
    </li>
    <li class="level1__item">
      four
    </li>
  </ul>
</div>

CSS

.nav {
 width: 100%;
 background: #252525;
 font-family: 'Roboto', sans-serif;
}

.level2 {
  /* display: none; */
  position: absolute;
  background-color: silver;
}

.level1 {
  color: white;
  width: 300px;
  list-style-type: none;
  display: flex;
  line-height: 30px;
  font-size: 18px;
}

.level1__item {
  flex-grow: 1;
  position: relative;
}

.level1__item:hover {
  cursor: pointer;
  color: aqua;
}