井井客

搜索

利用float制作兼容ie6的纯css下拉菜单

下拉菜单是现代网页中常见的元素,用浮动怎么来制作纯css下拉菜单呢?

利用float制作兼容ie6的纯css下拉菜单

现在说到下拉菜单,相信一大部分人第一时间想到的就是JS代码实现,看看下面是如何不用Js实现的纯css下拉菜单吧。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>利用float制作兼容ie6纯css下拉菜单</title>
<style type="text/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; }
</style>
</head>
<body>
<dl class="nav">
  <dd><a href="">首页</a></dd>
  <dd> <a href="">点此下拉</a>
    <ul>
      <li><a href="">利用float制作</a></li>
      <li><a href="">兼容IE6的</a></li>
      <li><a href="">纯CSS下拉菜单</a></li>
      <li><a href="">效果不错吧</a></li>
    </ul>
  </dd>
  <dd> <a href="">点此下拉</a>
    <ul>
      <li><a href="">纯css下拉菜单</a></li>
      <li><a href="">兼容Ie6</a></li>
    </ul>
  </dd>
  <dd> <a href="">点此下拉</a>
    <ul>
      <li><a href="">CSS-FLOAT</a></li>
      <li><a href="">纯css下拉菜单</a></li>
    </ul>
  </dd>
</dl>
</body>
</html>

在javascript日新月异的今天,这次整理出的这些之前收藏的css代码,真是不得不感叹,前人的智慧不可小觑。

文章TAG:css

作者:井井客整理来源:互联网
本文标题:利用float制作兼容ie6的纯css下拉菜单
本文链接:/c/267.html

上一篇:如何做到让li:hover兼容IE6
下一篇:CSS控制同一行的文字与图片居中对齐

文章分类

相关阅读

随便看看