如何用css做下拉菜单

html-css019

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

纯CSS的下拉菜单，此处理解的意思就是<li>标签套<li>标签，然后再给<li>标签设置样式。在被套的<li>标签设置平时状态为隐藏，再等鼠标移动到上一个<li>标签时，将被套的<li>标签显示（样式：overflow:hidden）。

贴一段网上摘的纯CSS下拉菜单（二级）

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>利用float制作兼容ie6纯css下来菜单</title>

<style type="text/css">

* { margin:0padding:0}

ul { list-style:none}

a:hover {color:#555}

.nav { float:leftoverflow:hiddentext-align:centerfont-size:14px}

.nav dd { float:leftwidth:300pxmargin:-888px -150px 0 0}

.nav dd a { float:leftmargin-top:888pxdisplay:blockposition:relativebackground:#eeewidth:150pxheight:30pxline-height:30pxborder-bottom:1px solid #fff}

.nav a:hover { margin-right:1pxbackground:#3cf}

.nav dd ul { float:leftfont-size:0z-index:888}

.nav dd li a { clear:leftwidth:150pxmargin-top:0font-size:14px}

.nav dd li a:hover { margin-right:1px}

</style>

</head>

<body>

<dl class="nav">

<dd><a href="">首页</a></dd>

<dd>

<a href="">关于我们</a>

<ul>

<li><a href="">公司简介</a></li>

<li><a href="">公司文化</a></li>

<li><a href="">企业荣誉</a></li>

<li><a href="">联系我们</a></li>

</ul>

</dd>

<dd>

<a href="">新闻动态</a>

<ul>

<li><a href="">国内新闻</a></li>

<li><a href="">国外新闻</a></li>

</ul>

</dd>

<dd>

<a href="">产品展示</a>

<ul>

<li><a href="">111</a></li>

<li><a href="">222</a></li>

</ul>

</dd>

</dl>

</body>

</html>

不是填上文字的，而是那个下拉是做好的DIV，只不过是display：none的。

利用的是CSS的hover，来触发显示的。

做好要显示的下拉div，并控制好位置。

然后在根据hover 来触发就可以了。