<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>jQuery实现导航栏</title> ???<style> ???????*{ ???????????padding:0; ???????????margin:0; ???????} ???????#navigation>ul{ ???????????list-style: none; ???????} ???????#navigation>ul>li{ ???????????float: left; ???????????width: 80px; ???????????height: 30px; ???????????background: #009f95; ???????????color: #ffffff; ???????????text-align: center; ???????????line-height: 30px; ???????????cursor:pointer; ???????} ???????#navigation>ul>li:hover{ ???????????background:#0B61A4; ???????} ???????#navigation>ul>li>a{ ???????????color:#fff; ???????????text-decoration:none; ???????} ???????#navigation>ul>li>ul{ ???????????display:none; ???????} ???????#navigation>ul>li>ul>li{ ???????????background: #00B83F; ???????????list-style: none; ???????} ???????#navigation>ul>li>ul>li:hover{ ???????????background: #1E9FFF; ???????} ???????#navigation>ul>li>ul>li>a{ ???????????color:#fff; ???????????text-decoration: none; ???????} ???</style></head><body><div id="navigation"> ???<ul> ???????<li> ???????????<a href="">1</a> ???????????<ul> ???????????????<li><a href="">11</a></li> ???????????????<li><a href="">13</a></li> ???????????????<li><a href="">14</a></li> ???????????</ul> ???????</li> ???????<li> ???????????<a href="">2</a> ???????????<ul> ???????????????<li><a href="">21</a></li> ???????????????<li><a href="">22</a></li> ???????????????<li><a href="">23</a></li> ???????????</ul> ???????</li> ???????<li> ???????????<a href="">3</a> ???????</li> ???</ul></div><script src="../js/vendor/jquery-3.2.1.min.js"></script><script> ???$("#navigation>ul>li:has(ul)").hover(function(){ ???????//show ???????$(this).children(‘ul‘).stop().slideDown(); ???},function(){ ???????//hide ??????$(this).children(‘ul‘).stop().slideUp(); ???})</script></body></html>jQuery实现导航栏
原文地址：https://www.cnblogs.com/lihuijuan/p/9197955.html