怎么样使用纯CSS实现下拉菜单功能？

<style>
  ul{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  ul li a{
    display: block;
    text-decoration: none;
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: white;
    background-color: #2f3e45;
  }
  .drop-down{
    width: 100px;
    height: 50px;
  }
  .drop-down-content{
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: all 1s ease;
  }

  p{
    font-size: 20px;
    margin: 0;
  }
  .drop-down-content li:hover a{
    background-color: red;
  }
  .nav .drop-down:hover .drop-down-content{
    opacity: 1;
    height: 150px;
  }
</style>
<ul class="nav">
  <li class="drop-down">
    <a href="#">下拉菜单</a>
    <ul class="drop-down-content">
      <li><a href="#">菜单1</a></li>
      <li><a href="#">菜单2</a></li>
      <li><a href="#">菜单3</a></li>
    </ul>
  </li>
</ul>
<p>内容</p>