纯CSS、原生JS、jQuery实现下拉菜单功能

一、纯CSS实现

实现下拉菜单需要用display，即改变display的block或none值。

先构建基本的HTML框架，

<div id="nav">
    <ul>
        <li><a href="#">新闻</a></li>
        <li><a href="#">体育</a>
            <ul class="item">
                <li><a href="#">乒乓球</a></li>
                <li><a href="#">羽毛球</a></li>
            </ul>
        </li>
        <li><a href="#">科技</a></li>
        <li><a href="#">文化</a></li>
        <li><a href="#">娱乐</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>

纯CSS实现，

#nav{                            /*1*/                                
    width: 600px;
    height: 50px;
    margin: 0 auto;
    background-color: #e9e9e9;
    color: #000;
}
#nav ul li{                     /*2*/
    width:100px;
    text-align: center;
    line-height: 50px;
    float: left;
}
#nav ul li a:hover{             /*3*/
    display:block;
    background-color:#5c5c5c;
}
.item li{                       /*4*/
    background-color: #e9e9e9;
    display:none;
}
#nav ul li:hover .item li{      /*5*/
    display:block;
}

上述代码详解：

1、给整体标题（id="nav"）设置样式，自适应居中。

2、标题下的每个一级列表设置样式，设置左浮动让其一排显示。

3、当鼠标滑至每个标题的一级列表上时显示背景色，将<a>标签设置成块元素才可以改变背景色。

4、所需要下拉的菜单为二级菜单，默认情况下保持不显示状态。

5、如下，

标题中每个列表在鼠标滑过时，只有class="item"的元素下的 li 会有显示。

在样式设置时，需要一些初始化设置，可以在CSS文档的头部写好，也可以单独写成一份文档 reset.css 先引入，也方便以后使用，保存该文档需要初始化就引入。

*{
  margin: 0;
  padding: 0;
  list-style: none;
}

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,          /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li,                                   /* list elements 列表元素 */
pre,                                                      /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea,          /* form elements 表单元素 */
th, td                                                    /* table elements 表格元素 */ {
  margin: 0;
  padding: 0;
}

/** 重置列表元素 **/
ul,li, ol {
  list-style: none; 
}

/** 重置文本格式元素 **/
a,a:hover{ 
  text-decoration: none; 
}

/** 重置表单元素 **/
legend{                               /* for ie6 */
  color: #000; 
}

fieldset, img                         /* 让链接里的 img 无边框 */
{ 
  border: 0; 
}

button, input, select, textarea{      /* 使得表单元素在 ie 下能继承字体大小 */
  font-size: 100%; 
}

/** 重置表格元素 **/
table{ 
  border-collapse: collapse; 
  border-spacing: 0; 
}

二、原生JS实现

先构建基本的HTML框架，

<div id="nav">
	<ul>
		<li><a href="#">新闻</a></li>
		<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">体育</a>
			<ul>
				<li><a href="#">乒乓球</a></li>
				<li><a href="#">羽毛球</a></li>
			</ul>
		</li>
		<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">科技</a>
			<ul>
				<li><a href="#">VR</a></li>
				<li><a href="#">人工智能</a></li>
				<li><a href="#">大数据</a></li>
			</ul>
		</li>
		<li><a href="#">文化</a></li>
		<li><a href="#">娱乐</a></li>
		<li><a href="#">关于我们</a></li>

	</ul>
</div>

设置标题菜单的基本样式，同样将初始化的文档先引入，

#nav{
    width:600px;
    height:40px;
    background-color:#eee;
    margin:0 auto;
}
ul li{
    float:left;
    line-height:40px; 
    text-align:center;
    width:100px;
}
a:hover{
    display: block;
    color:#F00; 
    background-color:#ccc;
}
ul li ul li{
    float:none;
    background-color:#eee; 
    margin:2px 0px;
}
ul li ul{
    display:none;
}

JavaScript实现下拉菜单，

function displaySubMenu(li) {
    var subMenu = li.getElementsByTagName("ul")[0];
    subMenu.style.display = "block";
}
function hideSubMenu(li) {
    var subMenu = li.getElementsByTagName("ul")[0];
    subMenu.style.display = "none";
}

上述代码详解：

定义两个函数用于显示和隐藏下拉菜单。显示函数中，（隐藏函数同理）

1、函数参数为图中竖形标记的区域。

2、函数参数（li）下获取<ul> 标签，[ 0 ] 表示找第一个 < ul >，因为有可能该 li 元素下有多个 < ul >，并定义变量将获取的值赋给它。

3、将样式设置成可见的。

4、HTML中添加鼠标事件，this表示获取到元素的当前 li 元素。

三、jQuery实现

先构建基本的HTML框架，

<div id="nav">
    <ul>
        <li><a href="#">新闻</a></li>
        <li class="select"><a href="#">体育</a>
            <ul class="item">
                <li><a href="#">乒乓球</a></li>
                <li><a href="#">羽毛球</a></li>
            </ul>
        </li>
        <li><a href="#">科技</a></li>
        <li><a href="#">文化</a></li>
        <li><a href="#">娱乐</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>

设置标题菜单的基本样式，同样将初始化的文档先引入，

#nav{
  width:600px;
  height:40px;
  background-color:#eee;
  margin:0 auto;
}
ul li{
  float:left;
  line-height:40px; 
  text-align:center;
  width:100px;
}
ul li:hover{
  color:#F00; 
  background-color:#ccc;
  cursor: pointer;
}
.item li{
  background-color:#eee; 
}
.item{
  display:none;
}

jQuery实现下拉菜单，

$(document).ready(function(){
    $('.select').hover(function() {
        $(".item").css('display', 'block');
    }, function() {
        $(".item").css('display', 'none');
    });
}) 

上述代码详解：

1、选中class="select" 元素设置它下面的class="item" CSS样式的显示、隐藏。

2、CSS中设置class="item"默认情况下为隐藏。

但存在一个问题尚未解决，

 选中下拉的二级菜单时候，背景颜色应该还原的 “体育” 没有改变！