使用jquery方法实现；实现方法：首先需要引入jquery的版本，引用toggle()的方法，点击当前的一级导航。用this方法来进行当前包含的二级菜单隐藏与显示。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-172minjs" ></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: left;width: 100px;line-height: 40px; text-align: center;}
menu li a{display: block; color:red;font-size: 18px;}
menu-two{display: none;width: 100px;}
menu li menu-two a{font-size: 14px;color:#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进行显示
epreventDefault();//阻止冒泡事件
},function(e){
$(this)siblings()hide();对当前的menu>li a的兄弟节点menu-two进行隐藏
epreventDefault();
}
)
})
</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: left;width: 100px;line-height: 40px; text-align: center;}
menu li a{display: block; color:red;font-size: 18px;}
menu-two{display: none;width: 100px;}/隐藏当前的二级菜单/
menu li menu-two a{font-size: 14px;color:#000;}
menu li:hover menu-two{display: block;}/鼠标的hover伪类事件对menu-tow进行显示/
</style>
32种方式都可以实现想要的下拉菜单效果，jquery的实现方式与纯css的实现方式均可以，如果需要有个缓动的动画效果，可以在当前的jquery方式下进行修改，纯css的实现需要用css3的属性来实现。都是很酷炫的（PS：css3的效果只支持ie9及以上）。
HTML中做一个可以输入的下拉框，需要用户添加label标签设置我们的下拉菜单选项的内容相应的选项值，然后设置select标签，在select标签内部设置option选项标签，设置文本框，设置label标签，显示文本框的说明文字，然后添加textarea标签，内部设置我们文本框的相关属性即可。具体 *** 作步骤如下。
1、添加label标签设置我们的下拉菜单选项的内容相应的选项值，然后设置select标签，在select标签内部设置option选项标签，这里需要几个选项就设置几个标签。如下图所示。
2、将下拉菜单需要显示的每一个内容设置在option标签中，如图所示，预览的设置效果，在网页中我们可以看到一个下拉菜单。如下图所示。
3、有时候下拉菜单也需要设置一个默认的值，如果大部分内容都是相同的，可以将它设置为默认值，只需要在它相应的属性中设置为选中状态。如下图所示。
4、再次预览我们的网页，可以看到刚才设置checked的选项已经默认显示在了设置的下拉菜单中选中状态。如下图所以。
5、设置文本框，设置label标签，显示文本框的说明文字，然后添加textarea标签，内部设置文本框的相关属性。如下图所示。
6、最后，可输入下拉框制作完成。如下图所示。
注意事项：
HTML中做一个可以输入的下拉框按照上述步骤 *** 作即可制作完成。
select标记有一个属性multiple，将其设置成multiple="multiple"按住Ctrl键即可实现多选。 请看例子：<html>
<head>
<meta >
使用HTML和CSS制作下拉菜单的方法如下：
1、编写带有div导航的html代码：
2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。
3、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。
4、在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。
5、制作导航css：
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
bt{
width: 50px;height: 28px;
border: 1px solid #ddd;
background-color: #eee;
font:12px "宋体";
}
ct{
display: none;}
dt{
height: 30px;
margin-top: 0px;
border: 1px solid #ddd;
background-color: white;
padding:auto 10px;
}
dt1{
height: 30px;
margin-top: 1px;
border: 1px solid #ddd;
background-color: white;
padding:auto 10px;}
dt:hover,dt1:hover{background-color: #ddd;}
bt:hover{background-color: green;}
at:hover ct{display: inline-block;}
</style></head><body><div class="at">
<div>
<button class="bt" type="button" >按钮</button>
</div>
<div class="ct" >
<div class="dt1">下拉菜单</div>
<div class="dt">下拉菜单</div>
<div class="dt">下拉菜单</div>
<div class="dt">下拉菜单</div>
</div>
</div> </div> </body></html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）