css怎样实现简单的二级下拉菜单
一种超级简单的二级下拉菜单制作方法，代码如下：
<!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实现简单的二级下拉菜单啦！
2017-01-06 · 百度知道合伙人官方认证企业
育知同创教育
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="#">Products</a>
<ul>
<li><a href="#">Product A</a><li>
<li><a href="#">Product B</a><li>
<li><a href="#">Product C</a><li>
<li><a href="#">Product 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="#">Education</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、运行效果：
