css怎样实现简单的二级下拉菜单
发布网友
发布时间：2022-04-24 06:17
共3个回答
懂视网
时间：2022-04-06 15:17
本章给大家介绍如何css实现二级菜单效果？水平、垂直菜单的实现（代码实例）。通过html+css代码制作两种不同的二级菜单效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、css实现水平的二级菜单样式
css实现水平的二级菜单代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级菜单--水平</title>
<style>
*{margin: 0;padding: 0;}
.demo{background: red;width: 100%;height: 35px;}
nav{height: 35px;width: 1000px;margin: 0 auto;}
nav ul li{list-style-type:none;float: left}
nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;text-align: center;color:white;font-fimily:微软雅黑;}
nav ul li ul li{float: none}
nav ul li ul li a{color:black}
nav ul li ul{display: none;}
nav ul li:hover ul{display: block;}
</style>
</head>
<body>
<div class="demo">
<nav>
<ul>
<li><a href="#">菜单1</a>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
</ul>
</li>
<li><a href="#">菜单2</a>
<ul>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单2</a></li>
</ul>
</li>
<li><a href="#">菜单3</a>
<ul>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单4</a>
<ul>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单4</a></li>
</ul>
</li>
<li><a href="#">菜单5</a>
<ul>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单5</a></li>
</ul>
</li>
<li><a href="#">菜单6</a>
<ul>
<li><a href="#">菜单6</a></li>
<li><a href="#">菜单6</a></li>
<li><a href="#">菜单6</a></li>
<li><a href="#">菜单6</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>效果图：
鼠标没有移到上面：
鼠标移到菜单1上面：
由上面的实例可以看出，使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级菜单的li标签时，显示二级菜单的ul标签。
核心代码：
list-style-type:none - 删除圆点。
float：left-向左浮动，保证一级菜单水平显示。
:hover-用于选择鼠标指针浮动在上面的元素。
display:none-隐藏二级的菜单。
display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
先隐藏二级的菜单，当鼠标移动到一级菜单的li标签时，在显示二级菜单的ul标签。
二、css实现垂直的二级菜单样式
css实现垂直的二级菜单代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级菜单--垂直</title>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
img { border-style: none; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width: 200px; border: 1px solid #CCC; border-bottom:none;margin:50px auto;text-align: center;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #2CFF;color: #fff; padding: 0px 10px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }
#menu ul li ul { display:none; position: absolute; left: 200px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }
#menu ul li ul li{background-color: #21B4BB}
#menu ul li:hover{background-color: #21B4BB}
#menu ul li:hover ul { display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="">菜单1</a>
<ul>
<li>
<a href="#">菜单1</a>
</li>
</ul>
</li>
<li>
<a href="#">菜单2</a>
<ul>
<li>
<a href="#">菜单2</a>
</li>
<li>
<a href="#">菜单2</a>
</li>
</ul>
</li>
<li>
<a href="#">菜单3</a>
<ul>
<li>
<a href="#">菜单3</a>
</li>
<li>
<a href="#">菜单3</a>
</li>
<li>
<a href="#">菜单3</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>效果图：
鼠标没有移到上面：
鼠标移到菜单2上面：
由上面的实例可以看出，同样也是使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级菜单的li标签时，显示二级菜单的ul标签。
核心代码：
list-style-type:none - 删除圆点。
:hover-用于选择鼠标指针浮动在上面的元素。
display:none-隐藏二级的菜单。
display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
position :relative/ absolute--定位，让二级菜单在一级菜单的旁边显示。
先隐藏二级的菜单，当鼠标移动到一级菜单的li标签时，在显示二级菜单的ul标签。
热心网友
时间：2022-04-06 12:25
一种超级简单的二级下拉菜单制作方法，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简单的二级下拉菜单</title>
<style type="text/css">
#FM > li > ul.fm{ display:none;}
#FM > li:hover >ul.fm{ display:block;}
</style>
</head>
<body>
</body>
</html>
<body>
<ul id="FM">
<li><a href="#">首页</a>
<ul class="fm">
<li><a href="#">这是二级菜单</a></li>
<li><a href="#">这是二级菜单</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul class="fm">
<li><a href="#">这是二级菜单</a></li>
<li><a href="#">这是二级菜单</a></li>
</ul>
</li>
</li>
</ul>
</body>
</html>
所作出来的效果为：
这样子就很快的用css实现简单的二级下拉菜单啦！
热心网友
时间：2022-04-06 13:43
css实现简单的二级下拉菜单的思路：
1、创建菜单展示目录的html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>css二级菜单</title>
</head>
<body>
<div id="navigation">
<ul class="catnav">
<li class="active"><a href="#">Procts</a>
<ul>
<li><a href="#">Proct A</a><li>
<li><a href="#">Proct B</a><li>
<li><a href="#">Proct C</a><li>
<li><a href="#">Proct D</a><li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Service A</a><li>
<li><a href="#">Service B</a><li>
<li><a href="#">Service C</a><li>
<li><a href="#">Service D</a><li>
</ul>
</li>
<li><a href="#">Latest</a>
<ul>
<li><a href="#">News</a><li>
<li><a href="#">Technology</a><li>
<li><a href="#">Articles</a><li>
<li><a href="#">Ecation</a><li>
</ul>
</li>
</ul>
</div>
</body>
</html>
2、控制菜单显示的css：
menu.css代码：
#navigation{
height:80px;
margin:10px;
font-size: 15px;
border: 1px inset black;
background-color: black;
width:800px;
padding:5px;
float: left;
clear: none;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
}
#navigation .catnav
{
position: relative;
height: 70px;
overflow: hidden;
margin: 10px;
padding: 0px;
width:800px;
float:left;
}
#navigation .catnav li
{
float: left;
margin-left: 10px;
margin-top: 0px;
height: 25px;
}
#navigation .catnav a
{
text-decoration: none;
color:green;
height: 25px;
}
#navigation .catnav ul
{
width:90%;
overflow: hidden;
left:0px;
position: absolute;
top:20px;
display: none;
margin: 0px;
margin-top: 5px;
padding:3px;
background-color:#111111;
border:1px #000000 inset;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
}
#navigation .catnav li.active ul
{
display:block;
}
#navigation .catnav li.active a
{
color:white;
}
#navigation .catnav ul li
{
margin-top: 0px;
margin-left: 10px;
height: 20px;
}
#navigation .catnav li:hover ul
{
display: block;
z-index: 100;
}
#navigation .catnav li:hover a
{
color:white;
}
#navigation .catnav ul li a:hover
{
color:gray;
}
3、运行效果：
