css制作横排二级下拉菜单,代码如下:
<body>
<ul id="FM">
<li><a href="#">一级栏目</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级栏目</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级栏目</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
</body>
CSS样式设置代码,如下;
<style type="text/css">
ul#FM li {
float:left
width:160px
list-style:none
}
ul#FM li ul {
display:none
margin:0
padding:0
}
ul#FM li:hover ul{
display:block
}
ul#FM li a{
display:block
border:1px solid red
text-decoration:none
color:#000
}
ul#FM li li a {
display:block
font-size:12px
border:1px solid green
padding:3px
text-decoration:none
width:152px
color:#CC3399
}
ul#FM>li li a {
width:auto
}
</style>
所做出来的效果,鼠标放上去时,如图;
一种超级简单的二级下拉菜单制作方法,代码如下:
<!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/htmlcharset=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实现简单的二级下拉菜单啦!