abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三级导航</title> <script type="text/javascript" src="jquery-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三级导航</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script>、 <style type="text/css"> *{margin:0;padding:0;} .menu{width: 800px;height: 35px;margin:0px auto;background: #000;margin-top: 20px;color:#fff;border: 1px solid #ccc;border-radius: 5px;} ul{list-style:none;} ul li{width: 100px;height: 35px;line-height: 35px;text-align: center;float: left;border-right:1px solid #ccc;cursor:pointer; } .twobox li{width: 100px;height: 30px;line-height: 30px; background: #2d2d2d;color: #A9A9A9;font-size: 14px;position: relative;border: 0px;} .twobox li:hover{background: #000;color: #fff;} .three {position: absolute;top:0px;left: 100px;} .three li{width: 99px;height: 30px;line-height: 30px;border: 0;} </style> <script type="text/javascript"> $(function(){ //隐藏二级与三级下拉菜单 $('.twobox').hide() $('.three').hide() //当鼠标移动到包含二级菜单的一级菜单时显示当前二级菜单 $('.one>li').mouseover(function(){ $(this).find('.twobox').slideDown(500); }) //当鼠标移动出包含二级菜单的一级菜单时隐藏当前二级菜单 $('.one>li').mouseleave(function(){ $(this).find('.twobox').slideUp(500); }) //当鼠标移动到包含三级菜单的二级菜单时显示当前三级菜单 $('.two').mouseover(function(){ $(this).find('.three').slideDown(500); }) //当鼠标移除包含三级菜单的二级菜单时隐藏当前三级菜单 $('.two').mouseleave(function(){ $(this).find('.three').slideUp(500); }) }) </script> </head> <body> <div> <ul> <!-- 一级下拉菜单one --> <li>首页</li> <li>产品 <ul> <!-- 二级下拉菜单twobox --> <li>产品1</li> <li>产品2 <ul> <!-- 三级下拉菜单 three --> <li>产品2.1</li> <li>产品2.2</li> <li>产品2.3</li> <li>产品2.4</li> </ul> </li> <li>产品3 <ul> <li>产品3.1</li> <li>产品3.2</li> <li>产品3.3</li> <li>产品3.4</li> </ul> </li> </ul> </li> <li>公司新闻 <ul> <!-- 二级下拉菜单twobox --> <li>公司新闻1</li> <li>公司新闻2 <ul> <!-- 三级下拉菜单 three --> <li>公司新闻2.1</li> <li>公司新闻2.2</li> <li>公司新闻2.3</li> <li>公司新闻2.4</li> </ul> </li> <li>公司新闻3 <ul> <li>公司新闻3.1</li> <li>公司新闻3.2</li> <li>公司新闻3.3</li> <li>公司新闻3.4</li> </ul> </li> </ul> </li> <li>行业新闻 <ul> <!-- 二级下拉菜单twobox --> <li>行业新闻1</li> <li>行业新闻2 <ul> <!-- 三级下拉菜单 three --> <li>行业新闻2.1</li> <li>行业新闻2.2</li> <li>行业新闻2.3</li> <li>行业新闻2.4</li> </ul> </li> <li>行业新闻3 <ul> <li>行业新闻3.1</li> <li>行业新闻3.2</li> <li>行业新闻3.3</li> <li>行业新闻3.4</li> </ul> </li> </ul> </li> <li>联系我们</li> </ul> </div> </body> </html>