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><!-- 修改后的文字 --><imgsrc="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><!-- 修改后的文字 --><imgsrc="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"><adata-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"><imgsrc="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon091.svg"alt="icon09_1.svg"/><imgsrc="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"><adata-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"><imgsrc="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon071.svg"alt="icon07_1.svg"/><imgsrc="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"><adata-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"><imgsrc="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon081.svg"alt="icon08_1.svg"/><imgsrc="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><!-- 修改后的文字 --><imgsrc="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"><ahref="/register"target="_self"class="std_btn1_box std_parga1"><p>加入我们</p><!-- 修改后的文字 --><div class="std_btn1_box_icon"><imgsrc="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon091-301.svg"alt="icon09_1.svg"/><imgsrc="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"><ahref="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"><imgsrc="https://cdn-www.huorong.cn/Public/Uploads/uploadfile/images/20240301/icon051.svg"alt="icon05_1.svg"/><imgsrc="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"><ahref="/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实现一个具有二级菜单标题的导航栏，并详细讲解每一步的实现过程。

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()方法为二级菜单的显示和隐藏添加平滑的动画效果。

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