三种实现下拉菜单的方式

1. HTML / CSS 

HTML

<div id="nav">
    <ul>
        <li class="parent"><a href="#">Home</a></li>
        <li class="parent">
            <a href="#">Course</a>
            <ul class="children">
                <li class="child"><a href="#">Machine gun</a></li>
                <li class="child"><a href="#">Judo</a></li>
                <li class="child"><a href="#">Dynamite</a></li>
                <li class="child"><a href="#">P.T.</a></li>
            </ul>
        </li>
        <li class="parent"><a href="#">Documentation</a>
            <ul class="children">
                <li class="child"><a href="#">RDX</a></li>
            </ul>
        </li>
        <li class="parent"><a href="#">About us</a>
            <ul class="children">
                <li class="child"><a href="#">About Violet-gem</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

* { margin: 0; padding: 0;}
ul { list-style: none;}
a{text-decoration: none; color: #FFFFFF; display: block; padding: 0 10px; height: 40px;}
a:hover {background-color: #9400D3; color: #7FFF00;}
#nav{background-color: #9370DB; width: 600px; height: 40px; margin: 0 auto;}
.parent{float: left; line-height: 40px; text-align: center; position: relative;}
.child{float: none; background-color: #9400D3; margin-top: 2px; white-space: nowrap;}
.child a:hover{background-color: #6E6588;}
.children{
    position: absolute;
    left: 0;
    top: 40px;
    display: none; /*1.先把二级菜单隐藏掉*/
    }
.parent:hover .children {
    display: block; /*2. 当鼠标划过一级菜单的子元素时，显示二级菜单*/
}

2.  JavaScript

HTML

<div id="nav">
    <ul>
        <li class="parent"><a href="#">Home</a></li>
        <!--3. 在二级菜单的父元素里加入鼠标事件，事件的方法为 js 代码里定义的方法-->
        <li class="parent" οnmοuseοver="showChildren(this)" οnmοuseοut="hideChildren(this)">
            <a href="#">Course</a>
            <ul class="children">
                <li class="child"><a href="#">Machine gun</a></li>
                <li class="child"><a href="#">Judo</a></li>
                <li class="child"><a href="#">Dynamite</a></li>
                <li class="child"><a href="#">P.T.</a></li>
            </ul>
        </li>
        <li class="parent" οnmοuseοver="showChildren(this)" οnmοuseοut="hideChildren(this)">
            <a href="#">Documentation</a>
            <ul class="children">
                <li class="child"><a href="#">RDX</a></li>
            </ul>
        </li>
        <li class="parent" οnmοuseοver="showChildren(this)" οnmοuseοut="hideChildren(this)">
            <a href="#">About us</a>
            <ul class="children">
                <li class="child"><a href="#">About Violet-gem</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

* { margin: 0; padding: 0;}
ul { list-style: none;}
a{text-decoration: none; color: #FFFFFF; display: block; padding: 0 10px; height: 40px;}
a:hover {background-color: #9400D3; color: #7FFF00;}
#nav{background-color: #9370DB; width: 600px; height: 40px; margin: 0 auto;}
.parent{float: left; line-height: 40px; text-align: center; position: relative;}
.child{float: none; background-color: #9400D3; margin-top: 2px; white-space: nowrap;}
.child a:hover{background-color: #6E6588;}
.children{
    position: absolute;
    left: 0;
    top: 40px;
    display: none; /*1. 先把二级菜单隐藏掉*/
}

JS

/*2. 编写隐藏这显示的 js 方法*/
function showChildren(parent){ /*这里的参数是随便设置的*/
    var children = parent.getElementsByTagName("ul")[0];/* 获取到标签为 ul ,下标为 0 的集合*/
    children.style.display = "block";
}
function hideChildren(parent){
    var children = parent.getElementsByTagName("ul")[0];
    children.style.display = "none";
}

3. jQuery

HTML

<!--在 jQuery 官网下载想用的 jQuery 库的版本到本地，并引入-->
    <script type="text/javascript" src="jquery-3.0.0.min.js"></script>

<div id="nav">
    <ul>
        <li class="parent"><a href="#">Home</a></li>
        <!--3. 在二级菜单的父元素里加入鼠标事件，事件的方法为上面定义的方法-->
        <li class="parent">
            <a href="#">Course</a>
            <ul class="children">
                <li class="child"><a href="#">Machine gun</a></li>
                <li class="child"><a href="#">Judo</a></li>
                <li class="child"><a href="#">Dynamite</a></li>
                <li class="child"><a href="#">P.T.</a></li>
            </ul>
        </li>
        <li class="parent">
            <a href="#">Documentation</a>
            <ul class="children">
                <li class="child"><a href="#">RDX</a></li>
            </ul>
        </li>
        <li class="parent">
            <a href="#">About us</a>
            <ul class="children">
                <li class="child"><a href="#">About Violet-gem</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

* { margin: 0; padding: 0;}
ul { list-style: none;}
a{text-decoration: none; color: #FFFFFF; display: block; padding: 0 10px; height: 40px;}
a:hover {background-color: #9400D3; color: #7FFF00;}
#nav{background-color: #9370DB; width: 600px; height: 40px; margin: 0 auto;}
.parent{float: left; line-height: 40px; text-align: center; position: relative;}
.child{float: none; background-color: #9400D3; margin-top: 2px; white-space: nowrap;}
.child a:hover{background-color: #6E6588;}
.children{
    position: absolute;
    left: 0;
    top: 40px;
    display: none; /*1. 先把二级菜单隐藏掉*/
}

jQuery

//这是完整的写法，表示整个网页加载完后再执行这段代码，可简写成 $(function(){}
$(document).ready(function(){
    $(".parent").mouseover(function () { //用 class 获取一级菜单
        $(this).children("ul").show(); //用 children() 方法找到 .parent 的子元素
    });
    $(".parent").mouseout(function(){
        $(this).children("ul").hide();
    })
})