最终效果图如下：
html代码如下：
<div class="smalItem">
<div class="leftnav">
<div class="navbox">
<div class="list-box leave-class">
<p class="title clear">
<strong>
<em>学历教育 · 选专业</em>
</strong>
</p>
</div>
<div class="list-box over-class" data-num="0">
<p class="navlist">
<span>/ </span>
<a href="/major/?b=1">计算机类</a><span> / </span>
<a href="/major/?b=6">通讯类</a><span> / </span>
<a href="/major/?b=8">电气电力类</a> <span class="icon iconfont icon-arrow-rit"></span>
</p>
</div>
<div class="list-box over-class" data-num="1">
<p class="navlist">
<span>/ </span>
<a href="/major/?b=3">管理类</a><span> / </span>
<a href="/major/?b=11">财经类</a><span> / </span>
<a href="/major/?b=12">法律类</a><span> / </span>
<a href="/major/?b=14">医学类</a> <span class="icon iconfont icon-arrow-rit"></span>
</p>
</div>
<div class="list-box over-class" data-num="2">
<p class="navlist">
<span>/ </span>
<a href="/major/?b=4">机械制造类</a><span> / </span>
<a href="/major/?b=5">交通运输类</a><span> / </span>
<a href="/major/?b=9">石化地矿类</a> <span class="icon iconfont icon-arrow-rit"></span>
</p>
</div>
<div class="list-box over-class" data-num="3">
<p class="navlist">
<span>/ </span>
<a href="/major/?b=2">师范语言类</a><span> / </span>
<a href="/major/?b=13">艺术传媒类</a><span> / </span>
<a href="/major/?b=15">心理学类</a> <span class="icon iconfont icon-arrow-rit"></span>
</p>
</div>
<div class="list-box over-class" data-num="4">
<p class="navlist" style="border-bottom: none;">
<span>/ </span>
<a href="/major/?b=7">土建类</a><span> / </span>
<a href="/major/?b=16">农业类</a><span> / </span>
<a href="/major/?b=19">其他类</a> <span class="icon iconfont icon-arrow-rit"></span>
</p>
</div>
</div>
<div class="list-box over-class" data-num="5">
<div class="choose">
<p class="box logo">
<img class="lazy-one" src="/Public/assets/img/cup.png" data-original="/Public/assets/img/cup.png" style="display: inline;">
</p>
<p class="box">
<a href="/school/index.html">
<strong>选院校 <span class="icon iconfont icon-arrow-rit"></span>
</strong>
<span>985/211重点院校</span>
</a>
</p>
</div>
</div>
<div class="school-select" style="display: none;" data-type="0">
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=1" onclick="clickBtn(1,'menu_zydlz')">计算机类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=1">计算机科学与技术 </a>
</span><span>
<i></i>
<a href="/major/?t=5">网络工程 </a>
</span><span>
<i></i>
<a href="/major/?t=14">信息管理 </a>
</span><span>
<i></i>
<a href="/major/?t=29">软件工程 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=6" onclick="clickBtn(6,'menu_zydlz')">通讯类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=9">电子信息 </a>
</span><span>
<i></i>
<a href="/major/?t=13">通信工程 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=8" onclick="clickBtn(8,'menu_zydlz')">电气电力类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=15">电气自动化 </a>
</span><span>
<i></i>
<a href="/major/?t=81">农业电气化 </a>
</span><span>
<i></i>
<a href="/major/?t=97">轨道电气化 </a>
</span>
</p>
</div>
</div>
<div class="school-select" style="display: none;" data-type="1">
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=3" onclick="clickBtn(3,'menu_zydlz')">管理类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=3">行政管理 </a>
</span><span>
<i></i>
<a href="/major/?t=12">电子商务 </a>
</span><span>
<i></i>
<a href="/major/?t=23">工商管理 </a>
</span><span>
<i></i>
<a href="/major/?t=27">市场营销 </a>
</span><span>
<i></i>
<a href="/major/?t=30">旅游管理 </a>
</span><span>
<i></i>
<a href="/major/?t=31">公共事业 </a>
</span><span>
<i></i>
<a href="/major/?t=33">人力资源管理 </a>
</span><span>
<i></i>
<a href="/major/?t=87">物业管理 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=11" onclick="clickBtn(11,'menu_zydlz')">财经类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=24">会计 </a>
</span><span>
<i></i>
<a href="/major/?t=34">金融 </a>
</span><span>
<i></i>
<a href="/major/?t=35">国际贸易 </a>
</span><span>
<i></i>
<a href="/major/?t=48">保险 </a>
</span><span>
<i></i>
<a href="/major/?t=49">财务管理 </a>
</span><span>
<i></i>
<a href="/major/?t=50">经济学 </a>
</span><span>
<i></i>
<a href="/major/?t=88">财政学 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=12" onclick="clickBtn(12,'menu_zydlz')">法律类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=25">法学 </a>
</span><span>
<i></i>
<a href="/major/?t=37">法务 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=14" onclick="clickBtn(14,'menu_zydlz')">医学类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=53">公共卫生管理 </a>
</span><span>
<i></i>
<a href="/major/?t=54">护理学 </a>
</span><span>
<i></i>
<a href="/major/?t=63">药学 </a>
</span><span>
<i></i>
<a href="/major/?t=98">医学技术类 </a>
</span>
</p>
</div>
</div>
<div class="school-select" style="display: none;" data-type="2">
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=4" onclick="clickBtn(4,'menu_zydlz')">机械制造类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=4">船舶工程 </a>
</span><span>
<i></i>
<a href="/major/?t=7">机械工程 </a>
</span><span>
<i></i>
<a href="/major/?t=8">机电一体化 </a>
</span><span>
<i></i>
<a href="/major/?t=80">汽车工程 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=5" onclick="clickBtn(5,'menu_zydlz')">交通运输类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=22">物流管理 </a>
</span><span>
<i></i>
<a href="/major/?t=38">铁道工程 </a>
</span><span>
<i></i>
<a href="/major/?t=52">交通运输 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=9" onclick="clickBtn(9,'menu_zydlz')">石化地矿类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=17">安全工程 </a>
</span><span>
<i></i>
<a href="/major/?t=19">石油 </a>
</span><span>
<i></i>
<a href="/major/?t=20">环境工程 </a>
</span><span>
<i></i>
<a href="/major/?t=26">国土资源 </a>
</span><span>
<i></i>
<a href="/major/?t=56">采矿 </a>
</span><span>
<i></i>
<a href="/major/?t=58">新能源 </a>
</span><span>
<i></i>
<a href="/major/?t=59">燃气 </a>
</span><span>
<i></i>
<a href="/major/?t=79">冶金 </a>
</span><span>
<i></i>
<a href="/major/?t=90">宝石 </a>
</span>
</p>
</div>
</div>
<div class="school-select" style="display: none;" data-type="3">
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=2" onclick="clickBtn(2,'menu_zydlz')">师范语言类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=2">汉语言文学 </a>
</span><span>
<i></i>
<a href="/major/?t=10">物理 </a>
</span><span>
<i></i>
<a href="/major/?t=21">计算机教育 </a>
</span><span>
<i></i>
<a href="/major/?t=39">初等教育 </a>
</span><span>
<i></i>
<a href="/major/?t=40">学前教育 </a>
</span><span>
<i></i>
<a href="/major/?t=41">小语种 </a>
</span><span>
<i></i>
<a href="/major/?t=42">英语 </a>
</span><span>
<i></i>
<a href="/major/?t=43">体育 </a>
</span><span>
<i></i>
<a href="/major/?t=45">教育管理 </a>
</span><span>
<i></i>
<a href="/major/?t=65">数学 </a>
</span><span>
<i></i>
<a href="/major/?t=66">思想政治 </a>
</span><span>
<i></i>
<a href="/major/?t=69">地理 </a>
</span><span>
<i></i>
<a href="/major/?t=74">生物 </a>
</span><span>
<i></i>
<a href="/major/?t=75">历史 </a>
</span><span>
<i></i>
<a href="/major/?t=76">化学 </a>
</span><span>
<i></i>
<a href="/major/?t=77">美术 </a>
</span><span>
<i></i>
<a href="/major/?t=89">音乐 </a>
</span><span>
<i></i>
<a href="/major/?t=96">特殊教育 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=13" onclick="clickBtn(13,'menu_zydlz')">艺术传媒类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=46">艺术 </a>
</span><span>
<i></i>
<a href="/major/?t=55">新闻 </a>
</span><span>
<i></i>
<a href="/major/?t=71">广告 </a>
</span><span>
<i></i>
<a href="/major/?t=72">广播电视 </a>
</span><span>
<i></i>
<a href="/major/?t=73">摄影 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=15" onclick="clickBtn(15,'menu_zydlz')">心理学类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=60">心理学 </a>
</span>
</p>
</div>
</div>
<div class="school-select" style="display: none;" data-type="4">
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=7" onclick="clickBtn(7,'menu_zydlz')">土建类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=11">土木工程 </a>
</span><span>
<i></i>
<a href="/major/?t=32">工程管理 </a>
</span><span>
<i></i>
<a href="/major/?t=36">建筑工程 </a>
</span><span>
<i></i>
<a href="/major/?t=44">工程造价 </a>
</span><span>
<i></i>
<a href="/major/?t=47">房地产 </a>
</span><span>
<i></i>
<a href="/major/?t=51">道路桥梁 </a>
</span><span>
<i></i>
<a href="/major/?t=86">水利水电 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=16" onclick="clickBtn(16,'menu_zydlz')">农业类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=62">动物医学 </a>
</span><span>
<i></i>
<a href="/major/?t=64">农业技术 </a>
</span><span>
<i></i>
<a href="/major/?t=70">园林园艺 </a>
</span><span>
<i></i>
<a href="/major/?t=82">农村管理 </a>
</span><span>
<i></i>
<a href="/major/?t=83">林业 </a>
</span><span>
<i></i>
<a href="/major/?t=84">水产养殖 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=19" onclick="clickBtn(19,'menu_zydlz')">其他类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=28">大气科学 </a>
</span><span>
<i></i>
<a href="/major/?t=78">食品 </a>
</span><span>
<i></i>
<a href="/major/?t=95">材料 </a>
</span><span>
<i></i>
<a href="/major/?t=100">产品设计 </a>
</span>
</p>
</div>
</div>
<div class="school-select" data-type="5" style="display: none;">
<div class="school-list">
<p style="display: block;">
<strong class="active"><a href="/school/index.html">选院校</a></strong>
<span>
<i></i>
<a href="School/10032.html" onclick="clickBtn(10032,'memu_syschool')">北京语言大学 </a>
</span><span>
<i></i>
<a href="School/10055.html" onclick="clickBtn(10055,'memu_syschool')">南开大学 </a>
</span><span>
<i></i>
<a href="School/10141.html" onclick="clickBtn(10141,'memu_syschool')">大连理工大学 </a>
</span><span>
<i></i>
<a href="School/10200.html" onclick="clickBtn(10200,'memu_syschool')">东北师范大学 </a>
</span><span>
<i></i>
<a href="School/10159.html" onclick="clickBtn(10159,'memu_syschool')">中国医科大学 </a>
</span><span>
<i></i>
<a href="School/10145.html" onclick="clickBtn(10145,'memu_syschool')">东北大学 </a>
</span><span>
<i></i>
<a href="School/10394.html" onclick="clickBtn(10394,'memu_syschool')">福建师范大学 </a>
</span><span>
<i></i>
<a href="School/10183.html" onclick="clickBtn(10183,'memu_syschool')">吉林大学 </a>
</span><span>
<i></i>
<a href="School/10635.html" onclick="clickBtn(10635,'memu_syschool')">西南大学 </a>
</span><span>
<i></i>
<a href="School/10698.html" onclick="clickBtn(10698,'memu_syschool')">西安交通大学 </a>
</span><span>
<i></i>
<a href="School/10626.html" onclick="clickBtn(10626,'memu_syschool')">四川农业大学 </a>
</span><span>
<i></i>
<a href="School/11901.html" onclick="clickBtn(11901,'memu_syschool')">四川大学 </a>
</span><span>
<i></i>
<a href="School/10173.html" onclick="clickBtn(10173,'memu_syschool')">东北财经大学 </a>
</span><span>
<i></i>
<a href="School/10007.html" onclick="clickBtn(10007,'memu_syschool')">北京理工大学 </a>
</span><span>
<i></i>
<a href="School/10613.html" onclick="clickBtn(10613,'memu_syschool')">西南交通大学 </a>
</span><span>
<i></i>
<a href="School/10030.html" onclick="clickBtn(10030,'memu_syschool')">北京外国语大学 </a>
</span><span>
<i></i>
<a href="School/10511.html" onclick="clickBtn(10511,'memu_syschool')">华中师范大学 </a>
</span><span>
<i></i>
<a href="School/10224.html" onclick="clickBtn(10224,'memu_syschool')">东北农业大学 </a>
</span><span>
<i></i>
<a href="School/10730.html" onclick="clickBtn(10730,'memu_syschool')">兰州大学 </a>
</span><span>
<i></i>
<a href="School/10027.html" onclick="clickBtn(10027,'memu_syschool')">北京师范大学 </a>
</span><span>
<i></i>
<a href="School/10036.html" onclick="clickBtn(10036,'memu_syschool')">对外经济贸易大学 </a>
</span><span>
<i></i>
<a href="School/10004.html" onclick="clickBtn(10004,'memu_syschool')">北京交通大学 </a>
</span><span>
<i></i>
<a href="School/10614.html" onclick="clickBtn(10614,'memu_syschool')">电子科技大学 </a>
</span><span>
<i></i>
<a href="School/10295.html" onclick="clickBtn(10295,'memu_syschool')">江南大学 </a>
</span><span>
<i></i>
<a href="School/10013.html" onclick="clickBtn(10013,'memu_syschool')">北京邮电大学 </a>
</span><span>
<i></i>
<a href="School/10033.html" onclick="clickBtn(10033,'memu_syschool')">中国传媒大学 </a>
</span><span>
<i></i>
<a href="School/10046.html" onclick="clickBtn(10046,'memu_syschool')">*音乐学院 </a>
</span><span>
<i></i>
<a href="School/b0001.html" onclick="clickBtn(b0001,'memu_syschool')">北京大学（医学） </a>
</span><span>
<i></i>
<a href="School/10002.html" onclick="clickBtn(10002,'memu_syschool')">中国人民大学 </a>
</span><span>
<i></i>
<a href="School/10056.html" onclick="clickBtn(10056,'memu_syschool')">天津大学 </a>
</span><span>
<i></i>
<a href="School/10699.html" onclick="clickBtn(10699,'memu_syschool')">西北工业大学 </a>
</span><span>
<i></i>
<a href="School/11414.html" onclick="clickBtn(11414,'memu_syschool')">中国石油大学(华东) </a>
</span><span>
<i></i>
<a href="School/11415.html" onclick="clickBtn(11415,'memu_syschool')">中国地质大学(北京) </a>
</span><span>
<i></i>
<a href="School/21414.html" onclick="clickBtn(21414,'memu_syschool')">中国石油大学(北京) </a>
</span><span>
<i></i>
<a href="School/51315.html" onclick="clickBtn(51315,'memu_syschool')">广东开放大学 </a>
</span>
</p>
</div>
</div>
</div>
</div>
样式表如下：
.qlunbo {
height: 457px;
width: 100%;
}
.qlunbo .smalItem {
width: 1180px;
margin: 0 auto;
}
.qlunbo .leftnav {
position: relative;
top: 15px;
width: 290px;
height: 410px;
background-color: #252a31;
opacity: .95;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
font-size: 13px;
z-index: 5;
}
.qlunbo .leftnav .navbox {
padding-top: 20px;
}
.qlunbo .leftnav .navbox .list-box {
padding: 0 20px;
}
.qlunbo .leftnav .navbox .title {
background-color: rgba(255, 255, 255, .1)!important;
filter: Alpha(opacity=30);
font-size: 18px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 42px;
line-height: 42px;
color: #fff;
padding: 0 10px;
cursor: pointer;
}
.qlunbo .leftnav .navbox .title p {
margin: 0;
padding: 0;
}
.qlunbo .leftnav .navbox .title p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
.leftnav .navbox .title strong {
line-height: 42px;
font-weight: 400;
float: left;
}
.leftnav .navbox .list-box {
padding: 0 20px;
}
.leftnav .navbox .navlist {
width: 100%;
height: 48px;
line-height: 48px;
border-bottom: 1px dashed #fff;
cursor: pointer;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
}
.leftnav .navbox span {
margin-left: -5px;
}
.leftnav .navbox a {
margin-right: 5px;
color: #fff;
}
.leftnav .navbox .iconfont {
position: absolute;
right: 3px;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.qlunbo .leftnav .choose {
position: relative;
background-color: rgba(255, 255, 255, .1)!important;
filter: Alpha(opacity=30);
margin: 0 20px 20px 20px;
padding: 16px 0 16px 12px;
color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
z-index: 1;
}
.qlunbo .leftnav .choose p.box {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
.qlunbo .leftnav .choose p.logo {
margin-right: 20px;
width: 50px;
height: 50px;
}
.qlunbo .leftnav .choose p.box {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
.qlunbo .leftnav .choose p.box strong {
font-weight: 400;
font-size: 26px;
color: #fff;
display: block;
}
.qlunbo .leftnav .choose p.box span {
color: #c6c6c6;
}
.qlunbo .leftnav .school-select {
position: absolute;
z-index: 2;
top: 0;
left: 290px;
width: 588px;
min-height: 383px;
padding: 27px 20px 0 20px;
background-color: #fff;
border: 1px solid #e8e8e8;
-webkit-box-shadow: 0 0 5px 0 #f2f2f2;
-moz-box-shadow: 0 0 5px 0 #f2f2f2;
box-shadow: 0 0 5px 0 #f2f2f2;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.qlunbo .leftnav .school-select .school-list {
word-break: break-word;
width: 100%;
overflow-x: hidden;
font-size: 0;
}
.qlunbo .leftnav .school-select .school-list .sel-major {
margin-bottom: 25px;
}
.qlunbo .leftnav .school-select .school-list strong {
display: block;
padding-left: 13px;
margin-bottom: 10px;
font-size: 18px;
font-weight: 400;
color: #212121;
}
.qlunbo .leftnav .school-select .school-list strong.active a {
color: #fe9b00;
}
.qlunbo .leftnav .school-select .school-list span {
display: inline-block;
margin: 0 14px 22px -1px;
white-space: nowrap;
}
.qlunbo .leftnav .school-select .school-list span i {
display: inline-block;
height: 18px;
width: 1px;
margin-right: 14px;
vertical-align: middle;
background-color: #727272;
}
.qlunbo .leftnav .school-select .school-list span a {
vertical-align: middle;
font-size: 15px;
color: #212121;
}
.qlunbo .leftnav .navbox a:hover {
color: #fe9b00;
}
.qlunbo .leftnav .navbox em {
margin-right: 5px;
color: #fff;
}
.qlunbo .leftnav .navbox em:hover {
color: #fe9b00;
}
.qlunbo .leftnav .choose:hover {
background-color: rgba(23, 23, 23, .2)!important;
filter: Alpha(opacity=30);
}
.qlunbo .leftnav .school-select .school-list span a:hover {
color: #fe9b00;
}
.qlunbo .show-sel-list {
-webkit-border-radius: 5px 0 0 5px!important;
-moz-border-radius: 5px 0 0 5px!important;
border-radius: 5px 0 0 5px!important;
}
.qlunbo .show-sel-list .school-select {
-webkit-border-radius: 0 5px 5px 0!important;
-moz-border-radius: 0 5px 5px 0!important;
border-radius: 0 5px 5px 0!important;
}
js如下：
<script type="text/javascript">
seajs.use(['jquery.select']);
var $schoolListEle = $(".school-select");
var $leftNavEle = $(".leftnav");
/*二级菜单--鼠标悬停--开始*/
$('body').on('mousemove', '.over-class', function (event) {
$schoolListEle.hide();
var num = $(this).attr("data-num");
$leftNavEle.addClass('show-sel-list');
$($schoolListEle[num]).show();
})
/*二级菜单--鼠标悬停--结束*/
/*二级菜单--鼠标离开 --开始*/
$('body').on('mouseleave', '.leftnav', function (e) {
$leftNavEle.removeClass('show-sel-list');
$schoolListEle.hide();
})
/*二级菜单--鼠标离开--结束*/
$('body').on('mouseenter', '.leave-class', function (e) {
$leftNavEle.removeClass('show-sel-list');
$schoolListEle.hide();
})
</script>