网页设计_导航条_下拉菜单

导航条下拉菜单效果

1.导航条下拉html代码：

1
2 <div class="tnav">
3 <div class="tnav_c">
4 <ul>
5 <li><a href="#">首页a>li>
6 <li><a href="#">关于我们a>
7 <ul class="nav2">
8 <li><a href="#">关于我们a>li>
9 <li><a href="#">关于我们a>li>
10 <li><a href="#">关于我们a>li>
11 ul>
12 li>
13 <li><a href="#">业务合作a>
14 <ul class="nav2">
15 <li><a href="#">业务合作a>li>
16 <li><a href="#">业务合作a>li>
17 <li><a href="#">业务合作a>li>
18 ul>
19 li>
20 <li><a href="#">新闻中心a>li>
21 <li><a href="#">联系我们a>li>
22 ul>
23 div>
24 div>
25

2.导航条下拉js代码：

1 //新导航下拉2022.2.23
2 $(".tnav ul li").mouseenter(function(){
3 $(this).children("ul").show();
4 });
5 $(".tnav ul li").mouseleave(function(){
6 $(this).children("ul").hide();
7 });

3.导航条下拉css代码：

/* 2022.2.22 导航条*/
.tnav{height:50px;background:#0697FF;}
.tnav .tnav_c{width:1000px;height:50px;margin:0 auto;}
.tnav_c>ul>li{width:200px;height:50px;color:#fff;float:left;line-height:50px;text-align:center;position:relative;}
.tnav_c ul li a{color:#fff;font-size: 18px;}
.tnav_c ul li:hover{background-color:#0081FF;}
/* 导航条下拉菜单 */
.tnav ul{z-index:100}
.tnav_c li ul{width:130px;position:absolute;top:50px;left: 35px;background-color:#fff;display:none;}
.tnav_c .nav2 li{width:130px;height:50px;float:left;line-height:50px;text-align:center;}
.tnav_c li ul a{color:#666666;font-size: 16px;}
.tnav .nav2 li:hover{background-color:#0081FF;color:#FFFFFF;}
.tnav .nav2 li:hover a{color:#FFFFFF;}

4.导航条下拉菜单效果图：

5.感谢大家的支持！

作者：赖忠标

出处：https://www.cnblogs.com/lazb/

免责声明：文章、笔记等仅供分享、探讨、参考等学习之用，因此造成的任何后果概不负责。（如有错误、疏忽等问题，欢迎指正、讨论，谢谢）

本文版权归作者和博客园共有，欢迎转载，但请务必在文章页面明显位置给出原文连接，谢谢配合。