本文举例说明了用php jQuery实现的三级导航栏下拉菜单的显示效果。分享给大家参考，如下：

先看效果图：

1.db.php数据概况

？phpreturn Array(Array(' one '=' about us '，' two '=array('three_tit'='='公司简介'，' three_cont'=array('企业简介'，'组织架构'，'发展历史'，'企业文化'，'服务理念')Array('three_tit'='企业荣誉'，' three_cont'=array('获奖证书'，'行业贡献'，'资质认证'，'协会活动'，'公司成就'))，Array(' Three _ tit '='销售网络'，' Three_cont'=array('东北'，'华北'，'中东'，'华南'，'西南' array('one'='产品展示'，' two '=Array(array('three_tit'=)Three_cont'=array('数字产品'，'最新能源'，'新鲜水果'，'肉类食品'，'衣服'，'金银珠宝'))，Array(' Three _ tit '='商务服务'，' three_cont'=array('资质认证')最新技术前沿'))，array('one'='新闻中心'，' two '=Array(' Three _ tit '='企业动态'，' Three _ cont '=Array('公司新闻'，'新产品上市'，'企业array('one'='联系我们'，Two'=array(array('three_tit'='联系方式'，' three_cont'=array('在线客服'，'邮寄地址'，'电话传真'，'在线留言'))，array('three_tit'='人才招聘'，'？ 2 .索引文件

？phpheader(' Content-type : text/html；charset=utf-8 ')；//加载数据$data=include '。/db . PHP '；//加载html文件include '。/nav . html '；3.nav.html文件

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 /脚本类型=' text/JAVAScript ' src=' http :/js/jquery-1。7 .2 .量滴js/script脚本类型=' text/JavaScript ' $(function(){//对元素进行隐藏$('.菜单李').等式(4)。查找(' s ').hide()；$('.两里)。最后()。css(“”边框','无');//鼠标移入和移出事件$('.菜单李' .悬停(function(){ $(this)).查找('。两个')。show()；//鼠标移入和移出事件$('.两里)。悬停(function(){ $(this)).查找('。隐藏')。show()；}，function(){ $(this).查找('。隐藏')。hide()；});}，function(){ $(this).查找('。两个')。hide()；});})/scripttitle无标题文档/title style type=' text/CSS ' * { padd : 0；保证金： 0；}车身{ font: 18px/50px '微软雅黑；颜色： # FFF；}李{列表式：无；} a { text-decoration : none颜色： # FFF；} # nav { width: 610px高度： 50px背景技术# 01532Bmargin: 30px自动；边界半径： 5px盒影： 2px 3px 2px # 479 e33} # nav ul . menu { padd : 0 5px } # nav ul。菜单Li {宽度： 120 px高度： 50px线高： 50px文本对齐：中心；向左浮动：相对位置：} #导航ul.menu阿利{ display : block text-shadow :0 px 1px 1px # 479 e33；} #导航ul。菜单阿利：悬停{ color : # FFF；背景# 479 e33 } # nav ul . menu Li s { width : 0px x8 : 30px边框-左侧： 1px实心# 479E33display:块；绝对位置：右： 0；top: 10px} # nav ul。菜单Li ul {位置：绝对；top : 50pxleft : 0；背景# 479 e33 border-radius : 0 3px 3px；盒影： 2px 3px 2px # 479 e33} #导航ul。菜单Li ul Li {边框-底部： 1px实心# 479 e33宽度： 120像素；相对位置：} #导航菜单li ul阿利{ font-size : 16px} #导航菜单li ul li .隐藏{位置：绝对值；top: 0pxleft: 120px} #导航菜单li ul li .隐藏li{边框-左侧： 1px实心# 479E33} #导航菜单li ul li .隐藏阿利{ font-size : 14px}.两个。隐藏{ display : none }/style/head body div id=' nav ' ul class=' menu ' lia href=' '网站首页/as/s/li？PHP foreach($数据为$v) {？阿利？php echo $v['one']？/as/s ul class='two '？php foreach ($v['two'] as $val) {？阿利？php echo $val['three_tit']？/a ul class='隐藏？php foreach ($val['three_cont']作为$value) {？lia href=' '？php echo $值？/a/li？php }？/ul /li？php }？/ul /li？php }？/ul /div/body/html更多关于服务器端编程语言(专业超文本预处理器的缩写)相关内容感兴趣的读者可查看本站专题： 《php+mysql数据库操作入门教程》 、 《php+mysqli数据库程序设计技巧总结》 、 《php面向对象程序设计入门教程》 、 《PHP数组(Array)操作技巧大全》 、 《php字符串(string)用法总结》 、 《PHP网络编程技巧总结》 及《php常见数据库操作技巧汇总》

希望本文所述对大家服务器端编程语言(专业超文本预处理器的缩写)程序设计有所帮助。