CSS导航菜单（二级菜单）

index.html

<div class="nav">
  <ul>
    <li>
      <a href="#">Java</a>
      <ul class="subnav">
        <li><a href="#">Java入门</a></li>
        <li><a href="#">Java中级</a></li>
        <li><a href="#">Java高级</a></li>
      </ul>
    </li>
    <li>
      <a href="#">C#</a>
      <ul class="subnav">
        <li><a href="#">C#入门</a></li>
        <li><a href="#">C#中级</a></li>
        <li><a href="#">C#高级</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Python</a>
      <ul class="subnav">
        <li><a href="#">Python入门</a></li>
        <li><a href="#">Python中级</a></li>
        <li><a href="#">Python高级</a></li>
      </ul>
    </li>
    <li><a href="#">Go</a></li>
    <li><a href="#">Delphi</a></li>
  </ul>
</div>

style.scss只将跟二级菜单相关的写了注释

.nav {
  height: 40px;
  width: 420px;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  ul {
    li {
      display: inline-block;
      list-style: none;
      //二级菜单相对位置
      position: relative;
      //二级菜单的hover事件一定要写在父元素才起作用
      &:hover .subnav {
        display: block;
      }
      a {
        display: inline-block;
        height: 40px;
        width: 60px;
        text-align: center;
        text-decoration: none;
        color: #333;
        line-height: 40px;
        transition: background-color linear 0.2s;
        &:hover {
          background-color: royalblue;
          color: #fff;
        }
      }

      .subnav {
        //取消显示
        display: none;
        //菜单宽度
        width: 150px;
        //显示方式：绝对定位
        position: absolute;
        //距离顶部距离，因为相对定位设置的为li元素，所以设置为菜单高度
        top: 40px;
        //相对定位的左边距离
        left: 0;
        //padding设置为0 不然左边会有一段距离
        padding: 0;
        //菜单背景颜色
        background-color: #fff;
        //菜单阴影
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        //菜单圆角
        border-radius: 0 0 5px 5px;
        //鼠标放上去背景颜色圆角部分隐藏
        overflow: hidden;
        //防止被其他元素挡住
        z-index: 1;
        li {
          list-style: none;
          a {
            //显示为块状元素
            display: block;
            //导航宽度
            width: 140px;
            //文字对齐方式
            text-align: left;
            //增加左距
            padding-left: 10px;
            //鼠标放上去的背景颜色
            &:hover {
              background-color: royalblue;
            }
          }
        }
      }
    }
  }
}