标签套
标签,然后再给
标签设置样式。在被套的
标签设置平时状态为隐藏,再等鼠标移动到上一个
标签时,将被套的
标签显示(样式:overflow:hidden
)。
贴一段网上摘的纯CSS下拉菜单(二级)
利用float制作兼容ie6纯css下来菜单
*
{
margin:0
padding:0
}
ul
{
list-style:none
}
a:hover
{color:#555
}
.nav
{
float:left
overflow:hidden
text-align:center
font-size:14px
}
.nav
dd
{
float:left
width:300px
margin:-888px
-150px
0
0
}
.nav
dd
a
{
float:left
margin-top:888px
display:block
position:relative
background:#eee
width:150px
height:30px
line-height:30px
border-bottom:1px
solid
#fff
}
.nav
a:hover
{
margin-right:1px
background:#3cf
}
.nav
dd
ul
{
float:left
font-size:0
z-index:888
}
.nav
dd
li
a
{
clear:left
width:150px
margin-top:0
font-size:14px
}
.nav
dd
li
a:hover
{
margin-right:1px
}
首页
关于我们
公司简介
公司文化
企业荣誉
联系我们
新闻动态
国内新闻
国外新闻
产品展示
111
222
一种超级简单的二级下拉菜单制作方法,代码如下:
<!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实现简单的二级下拉菜单啦!