代码：
<！DOCTYPE html>
<html>
<头>
<title> JQuery实现下拉菜单</ title>
<meta http-equiv =“ Content-Type” content =“ text / html; charset = utf-8” />
<style type =“ text / css”>
* {边距：0像素；填充：0像素}
.nav {background-color：#eee; width：600px; height：40px; margin：0 auto;}
.nav-ul {列表样式：无；}
.nav-ul li {浮动：左；行高：40px；文本对齐：居中；位置：相对；}
.nav-ul li a {文本修饰：无；颜色：＃000；显示：阻止；填充：0 10px；}
.nav-ul li a：悬停{颜色：#FFF；背景颜色：＃666}
.nav-ul li .nav-ul-li-ul {位置：绝对；左：0px；顶部：40像素；显示：无；}
.nav-ul li .nav-ul-li-ul li {list-style：none; 浮点数：无；背景色：#eee；边距顶部：2像素；}
.nav-ul li .nav-ul-li-ul a：悬停{颜色：#FFF；背景颜色：＃36e}
</ style>
<script type =“ text / javascript” src =“ jquery-1.9.1.min.js”> </ script>
<script type =“ text / javascript”>
$（函数（）{
//鼠标悬浮到元素上
$（“。nav-ul .nav-ul-li”）。mouseover（function（）{
$（this）.children（“。nav-ul-li-ul”）。show（）;
}）;
//鼠标离开元素时
$（“。nav-ul .nav-ul-li”）。mouseout（function（）{
$（this）.children（“。nav-ul-li-ul”）。hide（）;
}）;
}）;
</ script>
</ head>
<身体>
<div class =“ nav”>
<ul class =“ nav-ul”>
<li> <a href="">首页</a> </ li>
<li class =“ nav-ul-li”>
<a href="">我的课程</a>
<ul class =“ nav-ul-li-ul”>
<li> <a href=""> html </a> </ li>
<li> <a href=""> css </a> </ li>
<li> <a href=""> javascript </a> </ li>
</ ul>
</ li>
<li> <a href="">关于我们</a> </ li>
</ ul>
</ div>
</ body>
</ html>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery