很多站长朋友们都不太清楚HTML怎么设置菜单列表，今天小编就来给大家整理HTML怎么设置菜单列表，希望对各位有所帮助，具体内容如下：
本文目录一览： 1、 HTML如何实现菜单 2、 如何使用HTML和CSS制作下拉菜单 3、 如何通过html和css完成下拉菜单的制作 4、 html下拉菜单怎么做 5、 html+css下拉菜单怎么制作 HTML如何实现菜单栏目一
栏目二
栏目三
栏目四
栏目五
这里将显示左侧栏目的内容
如何使用HTML和CSS制作下拉菜单制作下拉菜单有2种方法：
使用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: 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进行显示
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: 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>
3.2种方式都可以实现想要的下拉菜单效果，jquery的实现方式与纯css的实现方式均可以，如果需要有个缓动的动画效果，可以在当前的jquery方式下进行修改，纯css的实现需要用css3的属性来实现。都是很酷炫的（PS：css3的效果只支持ie9及以上）。
如何通过html和css完成下拉菜单的制作首先需要打开自己电脑上的DW软件，新建一个html页面，然后将其保存在桌面上。
接下来我们需要在body里面添加DIV标签，并在其内使用ul无序列表和li标签制作一个一级菜单栏，代码和浏览器的效果如下面两张图片所示。
因为菜单栏一般都是有链接的，我们就需要为每个li标签添加一个a标签，并增加适当的样式。使得鼠标移到链接上面时有明显的颜色变化。
截止到上一步我们的一级菜单栏已经制作完成，接下来我们需要制作二级菜单栏。我们在有二级菜单栏的一级菜单栏的li标签下面添加ul再添加li标签就可以制作二级菜单了。
关于二级菜单的代码以及css样式，和在浏览器中的显示效果如下图所示。
大家可以看到，这是静态的二级菜单，二级菜单会一直在网页当中显示，那么我们应该怎样让其先隐藏然后鼠标滑过一级菜单后再显示呢？
其实，这只需要我们为二级菜单的ul标签设置display的none和block两个属性就可以。默认情况下设置二级ul的display属性为none；鼠标滑过时dispaly属性为block。
这样一个二级菜单就制作完成了，想让其他的一级菜单下面也有二级菜单显示，我们只需要复制相应的代码就可以了。
html下拉菜单怎么做下拉菜单不知您说的是哪种，表单元素提供了select下拉框，完全满足下拉菜单的需求。
如果是导航类的下拉菜单的话，首先给可选择的主体部分设置宽高，相对定位属性。然后主体部分建子标签，也就是下拉出来的部分，这部分设置display:none，绝对定位。通过事件是鼠标悬浮或者点击来动态切换子标签的display，none为隐藏，block为显示。
html+css下拉菜单怎么制作使用HTML和CSS制作下拉菜单的方法如下：
1、编写带有div导航的html代码：
2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。
3、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。
4、在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。
5、制作导航css：
关于HTML怎么设置菜单列表的介绍到此就结束了，不知道本篇文章是否对您有帮助呢？如果你还想了解更多此类信息，记得收藏关注本站，我们会不定期更新哦。
查看更多关于HTML怎么设置菜单列表 html如何设置下拉菜单选项的详细内容...