【コピペでできる】CSSだけでドロップダウンメニューを作る方法

       <nav>
        <ul class="menu">
          <li>
            <a href="#">MENU1</a>
            <ul class="menu__child">
              <li><a href="#">CHILD1</a></li>
              <li><a href="#">CHILD2</a></li>
              <li><a href="#">CHILD3</a></li>
            </ul>
          </li>
          <li>
            <a href="#">MENU2</a>
            <ul class="menu__child">
              <li><a href="#">CHILD1</a></li>
              <li><a href="#">CHILD2</a></li>
              <li><a href="#">CHILD3</a></li>
            </ul>
          </li>
          <li>
            <a href="#">MENU3</a>
            <ul class="menu__child">
              <li><a href="#">CHILD1</a></li>
              <li><a href="#">CHILD2</a></li>
              <li><a href="#">CHILD3</a></li>
            </ul>
          </li>
          <li>
            <a href="#">MENU4</a>
            <ul class="menu__child">
              <li><a href="#">CHILD1</a></li>
              <li><a href="#">CHILD2</a></li>
              <li><a href="#">CHILD3</a></li>
            </ul>
          </li>
        </ul>
      </nav>

.menu {
display: flex;
width: 1000px;
padding: 0;
margin: 0 auto;
}
.menu > li {
width: 25%;
}

.menu li {
position: relative;
list-style: none;
}

.menu li a {
padding: 1em 1.5em;
text-decoration: none;
background: #000;
text-align: center;
display: block;
color: #fff;
}
.menu a:hover{
background: #912323;
}

.menu__child li {
height: 0;
overflow: hidden;
transition: 0.3s;
}
.menu ul {
padding: 0;
}

.menu li:hover > ul > li {
height: 3.2rem;
overflow: visible;
}