如何用css做下拉菜单

html-css017

如何用css做下拉菜单,第1张

纯CSS的下拉菜单,此处理解的意思就是

标签套

标签,然后再给

标签设置样式。在被套的

标签设置平时状态为隐藏,再等鼠标移动到上一个

标签时,将被套的

标签显示(样式: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实现简单的二级下拉菜单啦!