编程技术

Document

HTML+CSS+Query实现二级菜单

在这里插入图片描述
在网页设计中，导航菜单是非常重要的部分之一，尤其是具有二级下拉菜单的导航栏，可以提升用户体验。本文将通过HTML、CSS和jQuery实现一个具有二级菜单标题的导航栏，并详细讲解每一步的实现过程。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的博客</title>
    <link href="./css/base-v3.0.min.css" type="text/css" rel="stylesheet" />
    <link href="./css/base.css" type="text/css" rel="stylesheet" />
    <script src="./js/jquery.min.js"></script>
  </head>
  <body>
    <header class="ys_header">
      <div class="ys_hd_pc">
        <div class="mod_head">
          <div class="mod_head_bt">
            <div class="ys_cont1400">
              <div class="mod_head_bt_list std_parga1">
                <ul>
                  <li class="act yxnav_active1">
                    <a href="/">
                      <p class="mhbl_link1">博客首页</p>
                      <!-- 修改后的文字 -->
                    </a>
                  </li>
                  <li class="">
                    <a href="/person">
                      <p class="mhbl_link1">关于我</p>
                      <!-- 修改后的文字 -->
                    </a>

                    <!-- 二级下拉 -->

                    <div class="mhbl_pull pro_pull clearfix">
                      <div class="pro_pull_le fl">
                        <div class="pro_pull_le_li">
                          <div class="pro_pull_le_tp">
                            <a href="/person" target="_self">
                              <div class="pplt_wrap">
                                <p>个人简介</p>
                                <!-- 修改后的文字 -->
                                <img
                                  src="https://cdn-www.huorong.cn/Public/Cn/images/icon10.svg"
                                  alt=""
                                />
                              </div>
                            </a>
                          </div>

                          <div class="pro_pull_le_info">
                            <p>了解更多关于我的信息</p>
                            <!-- 修改后的文字 -->
                          </div>
                        </div>
                        <div class="pro_pull_le_li">
                          <div class="pro_pull_le_tp">
                            <a href="/person/person5" target="_self">
                              <div class="pplt_wrap">
                                <p>我的项目</p>
                                <!-- 修改后的文字 -->
                                <img
                                  src="https://cdn-www.huorong.cn/Public/Cn/images/icon10.svg"
                                  alt=""
                                />
                              </div>
                            </a>
                          </div>

                          <div class="pro_pull_le_info">
                            <p>查看我的个人项目</p>
                            <!-- 修改后的文字 -->
                          </div>
                        </div>
                      </div>

                      <div class="pro_pull_ri fr">
                        <div class="pro_pull_ri_parga">
                          <p>最新项目下载</p>
                          <!-- 修改后的文字 -->
                        </div>

                        <div class="pro_pull_ri_btn">
                          <div class="pprb_li">
                            <div class="std_btn1">
                              <a
                                data-url="https://www.huorong.cn/product/downloadHr60.php?pro=hr60"
                                class="std_btn1_box std_parga1 new-down"
                              >
                                <p>下载</p>
                                <!-- 修改后的文字 -->
                                <div class="std_btn1_box_icon">
                                  <img
                                    src="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon091.svg"
                                    alt="icon09_1.svg"
                                  />
                                  <img
                                    src="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon09.svg"
                                    alt="icon09.svg"
                                  />
                                </div>
                              </a>
                            </div>

                            <div class="pprb_li_parga">
                              <p>*支持Windows，推荐下载</p>
                              <!-- 修改后的文字 -->
                            </div>
                          </div>
                          <div class="pprb_li">
                            <div class="std_btn3">
                              <a
                                data-url="https://www.huorong.cn/product/downloadHr60.php?pro=hr60&amp;plat=arm64UrlAll"
                                class="std_btn3_box std_parga1 new-down"
                              >
                                <p>ARM版</p>
                                <!-- 修改后的文字 -->
                                <div class="std_btn1_box_icon">
                                  <img
                                    src="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon071.svg"
                                    alt="icon07_1.svg"
                                  />
                                  <img
                                    src="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon07.svg"
                                    alt="icon07.svg"
                                  />
                                </div>
                              </a>
                            </div>

                            <div class="pprb_li_parga">
                              <p>*支持Windows，ARM架构</p>
                              <!-- 修改后的文字 -->
                            </div>
                          </div>
                          <div class="pprb_li">
                            <div class="std_btn3">
                              <a
                                data-url="https://www.huorong.cn/product/downloadHr60.php?pro=hr60&amp;plat=x86UrlAll"
                                class="std_btn3_box std_parga1 new-down"
                              >
                                <p>32位版</p>
                                <!-- 修改后的文字 -->
                                <div class="std_btn1_box_icon">
                                  <img
                                    src="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon081.svg"
                                    alt="icon08_1.svg"
                                  />
                                  <img
                                    src="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon08.svg"
                                    alt="icon08.svg"
                                  />
                                </div>
                              </a>
                            </div>

                            <div class="pprb_li_parga">
                              <p>*支持Windows，X86架构32位</p>
                              <!-- 修改后的文字 -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="">
                    <a href="/enterprise">
                      <p class="mhbl_link1">关于我们</p>
                      <!-- 修改后的文字 -->
                    </a>

                    <div class="mhbl_pull pro_pull clearfix">
                      <div class="pro_pull_le fl">
                        <div class="pro_pull_le_tp">
                          <a href="/enterprise" target="_self">
                            <div class="pplt_wrap">
                              <p>团队</p>
                              <!-- 修改后的文字 -->
                              <img
                                src="https://cdn-www.huorong.cn/Public/Cn/images/icon10.svg"
                                alt=""
                              />
                            </div>
                          </a>
                        </div>

                        <div class="pro_pull_le_info">
                          <p>当前团队</p>
                          <!-- 修改后的文字 -->
                        </div>
                      </div>

                      <div class="pro_pull_ri fr">
                        <div class="pro_pull_ri_parga">
                          <p>我们</p>
                          <!-- 修改后的文字 -->
                        </div>

                        <div class="pro_pull_ri_btn">
                          <div class="pprb_li">
                            <div class="std_btn1">
                              <a
                                href="/register"
                                target="_self"
                                class="std_btn1_box std_parga1"
                              >
                                <p>加入我们</p>
                                <!-- 修改后的文字 -->
                                <div class="std_btn1_box_icon">
                                  <img
                                    src="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon091-301.svg"
                                    alt="icon09_1.svg"
                                  />
                                  <img
                                    src="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon09-802.svg"
                                    alt="icon09.svg"
                                  />
                                </div>
                              </a>
                            </div>

                            <div class="pprb_li_parga">
                              <p>*加入我们30天</p>
                              <!-- 修改后的文字 -->
                            </div>
                          </div>
                          <div class="pprb_li">
                            <div class="std_btn3">
                              <a
                                href="https://lic.buy.huorong.cn/html/dist/index.html#/login"
                                target="_blank"
                                class="std_btn3_box std_parga1"
                              >
                                <p>已经加入</p>
                                <!-- 修改后的文字 -->
                                <div class="std_btn1_box_icon">
                                  <img
                                    src="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon051.svg"
                                    alt="icon05_1.svg"
                                  />
                                  <img
                                    src="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon05.svg"
                                    alt="icon05.svg"
                                  />
                                </div>
                              </a>
                            </div>

                            <div class="pprb_li_parga">
                              <p>*立即登录</p>
                              <!-- 修改后的文字 -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="">
                    <a href="/appstore">
                      <p class="mhbl_link1">资源库</p>
                      <!-- 修改后的文字 -->
                    </a>
                  </li>
                  <li class="">
                    <a href="/technical-partner/agent-cooperation">
                      <p class="mhbl_link1">合作伙伴</p>
                      <!-- 保持不变 -->
                    </a>

                    <div class="mhbl_pull about_pull">
                      <ul>
                        <!-- 选中添加act yxnav_active2类名 -->

                        <li class="">
                          <a href="/technical-partner/agent-cooperation">
                            <p>我的空间</p>
                            <!-- 修改后的文字 -->
                          </a>
                        </li>
                        <li class="">
                          <a href="/technical-partner/technical-cooperation">
                            <p>求职信息</p>
                            <!-- 修改后的文字 -->
                          </a>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="mod_head_bt_trial">
                <div class="mod_head_tp">
                  <div class="std_btn1">
                    <a
                      href="/register"
                      target="_self"
                      class="std_btn1_box std_parga1"
                    >
                      <p>为我打call</p>
                      <!-- 修改后的文字 -->
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <script>
      // 一级导航鼠标经过变化
      $('.mod_head_bt_list>ul>li').hover(
        function () {
          // 添加导航激活类名 yxnav_active1，并移除兄弟节点的类名
          $(this)
            .addClass('yxnav_active1')
            .siblings()
            .removeClass('yxnav_active1')
          // 展开子菜单
          $(this).find('.mhbl_pull').stop().slideDown()
        },
        function () {
          // 移除激活类名
          $(this).removeClass('yxnav_active1')
          // 确保激活项保留类名
          $('.mod_head_bt_list>ul>li.act').addClass('yxnav_active1')
          // 收起子菜单
          $(this).find('.mhbl_pull').stop().slideUp()
        }
      )
      // 当用户将鼠标悬停在导航项上时，通过 jQuery 代码中 slideDown() 函数可以将 .mhbl_pull 从隐藏状态（display: none;）切换到可见状态，且带有滑动动画，从而展示子菜单。鼠标移出时则通过 slideUp() 将其隐藏。
    </script>
  </body>
</html>


@charset "utf-8";

body {
  font-family: "PingFang SC", "Microsoft Yahei";
}


/* 规范-start */
/* 规范-start */
@main-color: #FF8400;
@auxi-bgcolor1: #F5F5F5;
@auxi-bgcolor2: #FBF5EF;
@font-title2: 42px;
@font-title3: 36px;
@font-title4: 24px;
@font-title5: 20px;
@font-parga1: 16px;
@font-parga2: 18px;
@std-padding1: 120px;
@std-padding2: 80px;
@std-margin1: 30px;

@font-color: #191919;
@secondary-color: #5A5A5A;
@bg-color: #FBFBFB;
@border-color: #DFDFDF;
@shadow-color: rgba(113, 113, 113, 0.10);
@highlight-color: var(--main-color);

@font-face {
  font-family: 'huorong-bold';
  src: url('../fonts/ROBOTO-BOLD/roboto-bold-3-webfont.eot');
  src: url('../fonts/ROBOTO-BOLD/roboto-bold-3-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/ROBOTO-BOLD/roboto-bold-3-webfont.woff2') format('woff2'),
    url('../fonts/ROBOTO-BOLD/roboto-bold-3-webfont.woff') format('woff'),
    url('../fonts/ROBOTO-BOLD/roboto-bold-3-webfont.ttf') format('truetype'),
    url('../fonts/ROBOTO-BOLD/roboto-bold-3-webfont.svg#robotobold') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 分享翻译 */
.ys_wechat_cont_parga {
  p::before {
    /* 分享中文版本 */
    content: '分享到 - 微信';
    /* 分享英文版本 */
    /* content: 'Share the - weixin'; */
  }
}

.pro_pull_ri_btn .std_btn1_box,
.pro_pull_ri_btn .std_btn3_box {
  display: flex;
  align-items: center;
}

/* 导航默认选中 */
.yxnav_active1 {}

.yxnav_active2 {}

.yongsy-pc-ph-table {

  th,
  td {
    padding: 5px 10px;
    border: 1px solid #DDD;
  }
}

.slick-list {
  min-width: 100%;
}

.std_title2,
.yxedr_active h2 {
  font-size: @font-title2;
  line-height: 1.2;
  color: #191919;
}

.std_title3,
.yxedr_active h3 {
  font-size: @font-title3;
  line-height: 1.5;
  color: #232323;
}

.std_title4,
.yxedr_active h4 {
  font-size: @font-title4;
  line-height: 1.3;
  color: #232323;
}

.std_title5,
.yxedr_active h5 {
  font-size: @font-title5;
  line-height: 1.7;
  color: #333;
}

.std_parga1 {
  p {
    font-size: @font-parga1;
    line-height: 1.75;
    color: #5A5A5A;
  }
}

.std_parga2 {
  p {
    font-size: @font-parga2;
    line-height: 1.7;
    color: #666;
  }
}

.std_padding1 {
  padding-top: @std-padding1;
  padding-bottom: @std-padding1;
}

.std_padtop1 {
  padding-top: @std-padding1;
}

.std_padbot1 {
  padding-bottom: @std-padding1;
}

.std_marbotp1 {
  margin-bottom: @std-padding1;
}

.std_padding2 {
  padding-top: @std-padding2;
  padding-bottom: @std-padding2;
}

.std_padtop2 {
  padding-top: @std-padding2;
}

.std_padbot2 {
  padding-bottom: @std-padding2;
}

.std_margin1 {
  margin-top: @std-margin1;
}

.std_btn1,
.std_btn2,
.std_btn3,
.std_btn4 {
  display: inline-block;

  p {
    line-height: 52px;
    color: #fff;
    transition: all .36s;
  }
}

.std_btn1_box,
.std_btn2_box,
.std_btn3_box {
  display: block;
  padding: 0 42px;
  transition: all .36s;
  border-radius: 2px;
  border: 1px solid @main-color;
  background: @main-color;
}

.std_btn2,
.std_btn3 {
  p {
    color: @main-color;
  }
}

.std_btn2_box {
  background: #fff;
  border: 1px solid #fff;
}

.std_btn3_box {
  background: transparent;
}

.std_btn4 {
  p {
    line-height: 54px;
    color: #fff;
    position: relative;
    z-index: 5;
  }

  .std_btn4_box {
    display: block;
    padding: 0 73px;
    transition: all .36s;
    border-radius: 2px;
    position: relative;
    overflow: hidden;

    &::before {
      content: "";
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, #FDC05F 0%, #B66C2E 100%);
      position: absolute;
      top: 0;
      left: 0;
      transition: all .36s;
    }

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, #FF9D00 0%, #B66C2E 100%);
      position: absolute;
      top: 0;
      left: 0;
      transition: all .36s;
      opacity: 0;
    }
  }
}

.std_btn5_box {
  display: flex;
  align-items: center;

  p {
    color: @main-color;
  }

  img {
    width: 15px;
    margin-left: 6px;
  }
}

.ys_hd_pc {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: all .5s ease-in-out;
}

// Header Styles
.ys_header {
  .ys_hd_pc {
    .mod_head {
      background: #E2E2E2;

      // Bottom section styles
      .mod_head_bt {
        background: rgba(255, 255, 255, 0.95);
        position: relative;

        &::after {
          content: "";
          width: 100%;
          height: 1px;
          background: #E2E2E2;
          position: absolute;
          bottom: 0;
          left: 0;
        }

        .yxnav_active1 {
          border-bottom: 2px solid #007BFF; // 示例选中样式
        }

        .mhbl_link1 {
          color: #191919 !important;
          line-height: 46px !important;
          transition: all .36s;

          &:hover {
            color: #007BFF;
          }
        }

        .mod_head_bt_trial {
          position: relative;
          cursor: pointer;
          z-index: 5;

          .std_btn1 p {
            line-height: 44px;
          }
        }

        .mod_head_bt_list {
          >ul {
            display: flex;
            margin: 0 -45px;

            >li {
              padding: 0 45px;
              position: relative;

              &.yxnav_active1 a {
                color: #007BFF;
              }

              &:hover>.yx_downlist {
                display: block;
              }

              .mhbl_link1 {
                color: #191919 !important;
                line-height: 46px !important;
                transition: all .36s;
              }

              .about_pull {
                width: 100%;
                border-top: 1px solid #DFDFDF;
                background: #FBFBFB;
                padding: 25px 0;
              }

              .about_pull li {
                margin-bottom: 16px;
              }

              .about_pull p {
                color: #5A5A5A;
                transition: all .36s;
                text-align: center;
                line-height: 2.5;
              }

              .about_pull li:last-child {
                margin-bottom: 0;
              }

              .about_pull li.yxnav_active2 p {
                color: @main-color;
              }

              .mhbl_pull {
                position: absolute;
                top: 46px;
                left: 0;
                display: none;
                box-shadow: 0px 4px 10.2px 0px rgba(113, 113, 113, 0.10);
              }

              .pro_pull {
                width: 597px;
                border-top: 1px solid #DFDFDF;
                background: #fff;
              }

              .pro_pull_le {
                width: calc(100% - 330px);
                padding: 28px 42px 28px 45px;
                background: #fff;

                .pro_pull_le_li {
                  .pro_pull_le_tp {
                    .pplt_wrap p {
                      font-size: 18px;
                      line-height: 1.7;
                      color: var(@main-color);
                      font-weight: bold;
                      margin-right: 10px;
                    }

                    .pplt_wrap img {
                      width: 8px;
                      position: relative;
                      top: 10px;
                    }

                    .pplt_wrap {
                      display: flex;
                      align-items: flex-start;
                    }
                  }

                  &:nth-child(1) {
                    .pro_pull_le_tp {
                      padding-top: 0;
                    }
                  }
                }

                .pro_pull_le_info {
                  margin-top: 10px;
                  padding-bottom: 15px;
                  border-bottom: 1px solid #000;

                  p {
                    font-size: 14px;
                    line-height: 1.75;
                    color: #232323;
                  }
                }

              }

              .pro_pull_ri {
                padding: 30px 40px 67px;
                width: 330px;
                background: @auxi-bgcolor1;

                .pro_pull_ri_parga p {
                  font-size: 14px;
                  line-height: 1.75;
                  color: #232323;
                }


                .pro_pull_ri_btn {
                  margin-top: 16px;

                  .pprb_li_parga {
                    margin-top: 8px;

                    .pprb_li {
                      margin-top: 20px;

                      &:first-child {
                        margin-top: 0;
                      }


                    }

                    p {
                      font-size: 14px;
                      line-height: 1.75;
                      color: #A5A5A5;
                    }
                  }


                }

                .std_btn1,
                .std_btn2,
                .std_btn3,
                .std_btn4 {
                  display: inline-block;
                }

                .std_btn1_box_icon {
                  width: 16px;
                  height: 16px;
                  position: relative;
                  margin-left: 3px;
                }

                .std_btn1_box_icon img {
                  width: auto;
                  height: 100%;
                  position: absolute;
                  top: 0;
                  left: 50%;
                  transform: translateX(-50%);
                  transition: all .36s;
                }

                .std_btn3_box {
                  display: flex !important;
                  align-items: center;
                }
              }
            }
          }

        }
      }

      .ys_cont1400 {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .mod_head_logo {
          padding: 15px 0;

          img {
            max-width: 100%;
          }
        }

        .mod_head_login {
          display: flex;
          align-items: center;

          .mhbl_link1 {
            padding: 0 15px;
          }
        }
      }

      .yx_downlist {
        display: none;
        position: absolute;
        background-color: #fff;
        z-index: 1000;
        min-width: 180px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        margin-top: 10px;

        &::before {
          content: "";
          position: absolute;
          top: -8px;
          left: 20px;
          border-width: 8px;
          border-style: solid;
          border-color: transparent transparent #fff transparent;
        }

        ul {
          padding: 10px 0;

          li {
            padding: 8px 20px;
            color: #333;

            a {
              color: inherit;
              text-decoration: none;
              display: block;

              &:hover {
                background-color: #f5f5f5;
              }
            }
          }
        }
      }

      .mod_foot {
        background: #191919;
        padding: 40px 0;
        color: #fff;
        text-align: center;

        .footer_list {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;

          >li {
            margin: 0 15px;
            padding: 5px 0;

            a {
              color: #fff;
              text-decoration: none;

              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }


      // Optional dropdown style
      .mhbt_pull {
        width: 100%;
        top: 46px;
        border-bottom: none;
        background: transparent;
        box-shadow: none;
        padding: 20px 0 0 !important;

        .mhbt_pull_cont {
          border-radius: 5px;
          border-bottom: 1px solid @border-color;
          background: @bg-color;
          box-shadow: 0px 4px 10.2px 0px @shadow-color;
          padding: 30px 0;

          li {
            margin-bottom: 20px;

            &:last-child {
              margin-bottom: 0;
            }

            &.active a {
              color: @highlight-color !important;
            }

            a {
              font-size: 14px;
              line-height: 2;
              color: @secondary-color !important;
              transition: all 0.36s;
              text-align: center;
              display: block;
            }
          }
        }
      }
    }

  }
}

// 主体内容
.ys_main {
  margin-top: 120px;

  /* 规范-end */
  /* - banner - start*/
  .ys_banner {
    width: 100%;
    position: relative;

    .ys_ban_slick {

      .ys_ban_li {
        .ys_ban_imgbox {
          position: relative;
          z-index: 1;

          img {
            width: 100%;
          }

          &::before {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 3;
            width: 100%;
            height: 100%;
            /* background: rgba(0, 0, 0, .3); */
          }

          .ys_ban_ph {
            display: none;
          }

          // .ys_ban_pc,
          // .ys_nyban_pc {
          //   display: none;
          // }

          .ys_ban_video {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 2;
            transform: translate(-50%, -50%);
            width: 100%;
            object-fit: cover;
          }

          .ys_ban_video {
            top: 0;
            left: 0;
            transform: inherit;
          }

        }


      }


      .ys_ban_li.act.slick-active {
        .ys_ban_title1 {
          animation-delay: .1s;
        }

        .ys_ban_title2 {
          animation-delay: .2s;
        }

        .ys_ban_info {
          animation-delay: .3s;
        }

        .ys_ban_info_btn {
          animation-delay: .4s;
        }
      }

      .slick-dots {
        bottom: 50px;
      }
    }
  }
}

实现二级菜单标题的HTML+CSS+jQuery示例
在网页设计中，导航菜单是非常重要的部分之一，尤其是具有二级下拉菜单的导航栏，可以提升用户体验。本文将通过HTML、CSS和jQuery实现一个具有二级菜单标题的导航栏，并详细讲解每一步的实现过程。

  1. HTML结构
    HTML代码定义了整个导航栏的结构，包括一级菜单项和对应的二级菜单项。以下是示例代码：

html
复制代码

二级菜单示例
2. CSS样式 使用CSS来美化导航栏及其下拉菜单。我们需要确保二级菜单在正常情况下是隐藏的，只有当用户将鼠标悬停在相应的一级菜单项上时才显示。

css
复制代码
/* 基本样式 */
.nav_container {
width: 100%;
background-color: #333;
}

.nav_menu ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}

.nav_item {
position: relative;
}

.nav_item > a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
}

/* 二级菜单样式 */
.submenu {
position: absolute;
top: 100%;
left: 0;
background-color: #444;
display: none;
}

.submenu ul {
list-style: none;
padding: 0;
margin: 0;
}

.submenu li a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
}

.submenu li a:hover {
background-color: #555;
}
3. jQuery实现交互效果
通过jQuery实现当用户将鼠标悬停在一级菜单项上时，二级菜单显示的效果。

javascript
复制代码
$(document).ready(function () {
// 鼠标悬停在导航项时，显示二级菜单
$(‘.nav_item’).hover(
function () {
$(this).find(‘.submenu’).stop().slideDown();
},
function () {
$(this).find(‘.submenu’).stop().slideUp();
}
);
});
解释说明
HTML结构：一级菜单使用

  • 标签组织，每个一级菜单项使用
  • 标签表示，其中包含一个链接标签。如果该菜单项有二级菜单，则包含一个
    子菜单容器，里面也有一个
    • 列表用于组织二级菜单项。

CSS样式：

一级菜单项的链接设置为块级元素，并通过padding来控制其点击区域和视觉效果。
二级菜单项默认使用display: none;隐藏。
当鼠标悬停在一级菜单项上时，二级菜单通过jQuery的slideDown()方法显示，离开时通过slideUp()方法隐藏。
jQuery交互：jQuery的hover函数监听鼠标进入和离开的事件。slideDown()和slideUp()方法为二级菜单的显示和隐藏添加平滑的动画效果。

通过这种方式，二级菜单在用户交互时动态显示，提升了网站的用户体验。这种结构和样式的组合非常适用于需要简洁清晰导航结构的网站。