<nav id="chj2t"><big id="chj2t"><video id="chj2t"></video></big></nav>
  • <tbody id="chj2t"><pre id="chj2t"></pre></tbody>
    <li id="chj2t"><tr id="chj2t"><cite id="chj2t"></cite></tr></li>

      <em id="chj2t"></em>
      1. <rp id="chj2t"><object id="chj2t"></object></rp>
        <th id="chj2t"><pre id="chj2t"><sup id="chj2t"></sup></pre></th>

        一站式百度SEO排名優化!-找老劉博客 低投入,高轉化,精益求精、一絲不茍:旨在提供更好的SEO服務!

        首頁>>前端開發

        CSS - 鼠標移入懸停顯示下拉菜單(導航欄鼠標經過 hover 時出現二級菜單)

        首頁 2023-06-14 前端開發 313 ℃Tags:


        前言

        該效果很常見,網上的代碼都非常的亂,樣式改起來非常難受。

        本文提供 “最簡潔” 的解決方案與干凈整潔的代碼,一眼看過去就知道改哪里,

        配合 Vue.js 項目非常合適,如下圖所示:

        944ab0adc49e83c.gif

        完整源碼

        您建立一個干凈的 *.html 文件,或者直接選擇性復制即可。

        <section class="content">
          <!-- 有菜單 -->
          <div class="items">
            <div class="menu">
              <span>有菜單</span>
              <div>
                <div class="drop">選項A</div>
                <div class="drop">選項B</div>
                <div class="drop">選項C</div>
              </div>
            </div>
          </div>
          <!-- END -->
          <!-- 無下級 -->
          <div class="items">
            <div class="menu">
              <span>無菜單</span>
              <div></div>
            </div>
          </div>
          <!-- END -->
        </section>
        /* 最外層 */
        .content {
            display: flex;
            flex-direction: row;
        }
        /* END */
        /* 每個菜單的樣式(寬度這里調,子菜單寬度都聽這個) */
        .items {
            width: 130px;
            color: #fff;
        }
        /* END */
        /* 菜單與鼠標移入 */
        .menu{
            width: 100%;
            height: 45px;
            background: red;
            line-height: 45px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .menu:hover{
            overflow: visible;
            background: black;
            color: white;
            z-index: 999;
            cursor: pointer;
        }
        /* END */
        /* 下拉菜單與鼠標移入 */
        .drop{
            background: red;
            text-align: center;
            width: 100%;
            height: 45px;
            line-height: 45px;
            overflow: hidden;
        }
        .drop:hover{
            background: black;
            cursor: pointer;
        }
        /* END */


        搜索
        分類
        熱門標簽
      2. 首頁
      3. 電話
      4. QQ
      5. ?
        聯系老劉手機
        1043025812
        聯系老劉微信
        掃描微信二維碼
        人妻精品动漫H|2021国产精品视频|亚洲国产天堂久久综合|凹凸国产熟女精品视频国语
        <nav id="chj2t"><big id="chj2t"><video id="chj2t"></video></big></nav>
      6. <tbody id="chj2t"><pre id="chj2t"></pre></tbody>
        <li id="chj2t"><tr id="chj2t"><cite id="chj2t"></cite></tr></li>

          <em id="chj2t"></em>
          1. <rp id="chj2t"><object id="chj2t"></object></rp>
            <th id="chj2t"><pre id="chj2t"><sup id="chj2t"></sup></pre></th>