1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ?????????7 ????????<style type="text/css"> 8 ????????????*{ 9 ????????????????margin: 0px;10 ????????????????padding: 0px;11 ????????????}12 ????????????#nav{13 ????????????????background-color: #EEE;14 ????????????????width: 400px;15 ????????????????height: 40px;16 ????????????????margin: 0 auto;17 ????????????}18 ????????????ul{19 ????????????????list-style: none;20 ????????????}21 ????????????ul li{22 ????????????????float: left;23 ????????????????padding: 0 0;24 ????????????????line-height: 40px;25 ????????????????text-align: center;26 ????????????????position: relative;27 ????????????}28 ????????????a{29 ????????????????text-decoration: none;30 ????????????????color: #000000;31 ????????????????display: block;32 ????????????????padding: 0 10px;33 ????????????}34 ????????????a:hover{35 ????????????????color: #FFF;36 ????????????????background-color:#666666;37 ????????????}38 ????????????ul li ul li{39 ????????????????float: none;40 ????????????????background-color: #EEE;41 ????????????????margin-top: 2px;42 ????????????}43 ????????????ul li ul{44 ????????????????position: absolute;45 ????????????????left: 0px ;46 ????????????????top: 40px;47 ????????????????display: none;48 ????????????????49 ????????????}50 ????????</style>51 ????????<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>52 ????????<script>53 ????????????$(function(){54 ????????????????$(‘.navmenu‘).mousemove(function(){55 ????????????????????$(this).children(‘ul‘).show();56 ????????????????});57 ????????????????$(‘.navmenu‘).mouseout(function(){58 ????????????????????$(this).children(‘ul‘).hide();59 ????????????????});60 ????????????});61 ????????</script>62 ????</head>63 ????<body>64 ????????<div id="nav">65 ????????????<ul>66 ????????????????<li class="navmenu"><a href="#">首页</a></li>67 ????????????????<li class="navmenu"><a href="#">课程大厅</a>68 ????????????????????<ul>69 ????????????????????????<li><a href="#">jQuery</a></li>70 ????????????????????????<li><a href="#">javaScript</a></li>71 ????????????????????</ul>72 ????????????????</li>73 ????????????????<li><a href="#">学习中心</a></li>74 ????????????????<li><a href="#">经典案例</a></li>75 ????????????????<li><a href="#">关于我们</a></li>76 ????????????</ul>77 ????????</div>78 ????</body>79 </html>jQuery --下拉菜单的显示与隐藏
原文地址：https://www.cnblogs.com/ChenMM/p/9481102.html