使用jquery方法实现；实现方法：首先需要引入jquery的版本，引用toggle()的方法，点击当前的一级导航。用this方法来进行当前包含的二级菜单隐藏与显示。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
</head>
<style>
*{margin: 0 padding: 0}
ul,li{list-style: none}
a{text-decoration: none}
.menu{width: 1000px margin: 0 auto}
.menu li{float: leftwidth: 100pxline-height: 40px text-align: center}
.menu li a{display: block color:redfont-size: 18px}
.menu-two{display: nonewidth: 100px}
.menu li .menu-two a{font-size: 14pxcolor:#0000FF}
</style>
<body>
<ul class="menu">
<li><a href="#">一级菜单</a>
<ul class="menu-two">
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a>
<ul class="menu-two">
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a>
<ul class="menu-two">
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a>
<ul class="menu-two">
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a>
<ul class="menu-two">
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
</body>
<script type="text/javascript">
$(function(){
$(".menu > li a").toggle(
function(e){
$(this).siblings().show()//对当前的.menu>li a的兄弟节点menu-two进行显示
e.preventDefault()//阻止冒泡事件.
},function(e){
$(this).siblings().hide()对当前的.menu>li a的兄弟节点menu-two进行隐藏
e.preventDefault()
}
)
})
</script>
</html>
2.使用css的伪类样式hover实现，html结构上面的一样，只需要把二级菜单进行隐藏(display:none)然后在用hover方式，鼠标移上去让当前隐藏的（.menu-tow）进行（display:block）显示，纯css的方式：
<style>*{margin: 0 padding: 0}
ul,li{list-style: none}
a{text-decoration: none}
.menu{width: 1000px margin: 0 auto}
.menu li{float: leftwidth: 100pxline-height: 40px text-align: center}
.menu li a{display: block color:redfont-size: 18px}
.menu-two{display: nonewidth: 100px}/***隐藏当前的二级菜单***/
.menu li .menu-two a{font-size: 14pxcolor:#000}
.menu li:hover .menu-two{display: block}/**鼠标的hover伪类事件对.menu-tow进行显示**/
</style>
3.2种方式都可以实现想要的下拉菜单效果，jquery的实现方式与纯css的实现方式均可以，如果需要有个缓动的动画效果，可以在当前的jquery方式下进行修改，纯css的实现需要用css3的属性来实现。都是很酷炫的（PS：css3的效果只支持ie9及以上）。
Html中引入css的主要方式有四种，分别是外部样式、内部样式、内联样式、导入式。
一、外部样式
(一) 使用外部样式的好处
1.减少代码量 ，网站中相同部分的样式只需要编写一次，我们只需要把css文件引入到不同的html页面中即可实现展示效果。
2.更改网站风格方便，我们可以通过修改一个css文件就可以实现整个网站的外观修改。
3.Html页面渲染时，css文件能够被同时加载。
4.结构与表现分离，便于后期维护。
(二) 适用于多个页面需要相同样式内容的时候使用
(三) 书写位置：新建单独的后缀名为.css文件，使用link标签引入到html页面中，将link标签放到Html页面的head标签中
例：
rel:规定当前文档与被连接文档之间的关系.
href:规定为连接文档的位置
type:规定被连接文档的MIME类型
二、内部样式
(一) 使用内部样式的好处
1.结构与表现分离，便于后期维护。
2.所有的CSS控制都是针对单独的面，没有多余的CSS代码。
3.同样页面中相同的样式可以重复使用。
(二) 使用内部样式的缺点
1.只能在一个页面中使用
2.网站更换风格麻烦
3.Css在html页面中,页面显得臃肿
(三) 适用于个别页面需要特殊样式时
(四) 书写位置：写在html页面的head标签之间，在head标签之间书写style标签
例：
三、行间样式
(一) 使用内部样式的好处
1. 单独修改单个标签的样式
(二) 使用内部样式的缺点
1. 结构与表现没有分类，不利于后期维护。
2. 只能修改单个标签的样式，代码重复利用率不高，代码冗长。
(三) 适用于个别标签需要特殊样式时
(四) 书写位置：在标签的开始标签内部书写style=””
例：
四. 导入式
(一) 使用导入的好处
1.减少代码量，网站中相同的部分的样式只需要书写一次，后续只需要把css文件引入到不同的Html页面中即可。
2.更改网站风格方便，我们可以通过修改一个css文件，就可以修个整个网站的外观。
3.结构与表现分离，便于后期维护。
(二) 使用导入的缺点
1.需要等Html页面全部加载完才能加载css文件。
(三) 适用于多个页面需要展示相同样式的时候
(四) 书写位置:写在Html页面的head标签中的style表现中，用@import导入css文件
