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;
            }
          }
        }
      }
    }
  }
}