当前位置：网络学院首页 >> 设计教程 >> DIV特效代码 >> 纯CSS代码实现的酷酷的下拉菜单

纯CSS代码实现的酷酷的下拉菜单

来源：中国设计秀作者：zishu 点击：773 加入收藏

关键字：代码 css WEB标准 div 下拉菜单

这是刚才一个网友发来的代码，在IE6中不能正常显示，让我帮改一下！改完后，感觉这段代码不错，就贴出来和大家分享一下！

重点只有一个，就是下边的这行代码！

程序代码

#menu li:hover,#menu li a:hover{width:auto}
/*这句是后来加上的，如果不加会在IE6中有问题；width:auto是我随便写的，你删除后改成disploy:block或其它的内容，只要别它空就行*/

全部的布局为：

程序代码

<body>
<ul id="menu">
  <li> <a href="#nogo">
    <table>
      <tr>
        <td><dl>
            <dt><a href="#">Artech Studio</a></dt>
            <dd><a href="#">Web Dev</a></dd>
            <dd><a href="#">Web Design</a></dd>
            <dd><a href="#">Books</a></dd>
            <dd class="last"><a href="#">Contact Us</a></dd>
          </dl></td>
      </tr>
    </table>
    </a> </li>
  <li> <a href="#nogo">
    <table>
      <tr>
        <td><dl>....................

全部的CSS；还能优化！

程序代码

#menu{ margin:0;  padding:0;  list-style:none;  font:14px Arial;  }
#menu li{ float:left;margin:0 1px 0 0;}
#menu li dl{width:150px; padding:0 0 10px 0;
background:#cb6 url(http://www.zishu.cn/attachments/month_0804/62008414231638.jpg) no-repeat bottom left;}
#menu li dt{padding:5px;text-align:center;border-bottom:1px solid #b00;
background:#ed8 url(http://www.zishu.cn/attachments/month_0804/02008414231556.jpg) no-repeat top left;}
#menu li dt a,#menu li dt a:visited{display:block;color:#333;text-decoration:none;}
#menu li dd{margin:0;padding:0;color:#fff;background-color:#47a;}
#menu li dd.last{border-bottom:1px solid #b00;}
#menu li dd a,#menu li dd a:visited{height:1em;display:block;color:#fff;
text-decoration:none;padding:4px 5px 4px 20px;
background:#47a url(http://www.zishu.cn/attachments/month_0804/y2008414231728.gif) no-repeat 7px 7px;}
#menu li dd{display:none;}
#menu li:hover dd,#menu li a:hover dd{display:block;}
#menu li:hover,#menu li a:hover{width:auto}
/*这句是后来加上的，如果不加会在IE6中有问题；width:auto是我随便写的，你删除后改成disploy:block或其它的内容，只要别它空就行*/
#menu li dd a:hover{ background-color:#147; color:#9cf;}
#menu table{ border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}

查看效果：

代码如下:

<!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/html; charset=utf-8" />
<style type="text/css">
#menu{ margin:0;  padding:0;  list-style:none;  font:14px Arial;  }
#menu li{ float:left;margin:0 1px 0 0;}  
#menu li dl{width:150px; padding:0 0 10px 0;
background:#cb6 url(http://www.zishu.cn/attachments/month_0804/62008414231638.jpg) no-repeat bottom left;}  
#menu li dt{padding:5px;text-align:center;border-bottom:1px solid #b00;
background:#ed8 url(http://www.zishu.cn/attachments/month_0804/02008414231556.jpg) no-repeat top left;}  
#menu li dt a,#menu li dt a:visited{display:block;color:#333;text-decoration:none;}
#menu li dd{margin:0;padding:0;color:#fff;background-color:#47a;}  
#menu li dd.last{border-bottom:1px solid #b00;}   
#menu li dd a,#menu li dd a:visited{height:1em;display:block;color:#fff;
text-decoration:none;padding:4px 5px 4px 20px;
background:#47a url(http://www.zishu.cn/attachments/month_0804/y2008414231728.gif) no-repeat 7px 7px;}  
#menu li dd{display:none;}
#menu li:hover dd,#menu li a:hover dd{display:block;}
#menu li:hover,#menu li a:hover{width:auto}
/*这句是后来加上的，如果不加会在IE6中有问题；width:auto是我随便写的，你删除后改成disploy:block或其它的内容，只要别它空就行*/
#menu li dd a:hover{ background-color:#147; color:#9cf;}  
#menu table{ border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}  
</style>
</head>
<body>
<ul id="menu">
  <li> <a href="#nogo">
    <table>
      <tr>
        <td><dl>
            <dt><a href="#">Artech Studio</a></dt>
            <dd><a href="#">Web Dev</a></dd>
            <dd><a href="#">Web Design</a></dd>
            <dd><a href="#">Books</a></dd>
            <dd class="last"><a href="#">Contact Us</a></dd>
          </dl></td>
      </tr>
    </table>
    </a> </li>
  <li> <a href="#nogo">
    <table>
      <tr>
        <td><dl>
            <dt><a href="#">Artech Store</a></dt>
            <dd><a href="#">Books</a></dd>
            <dd><a href="#">DVDs</a></dd>
            <dd><a href="#">Movies</a></dd>
            <dd class="last"><a href="#">Service</a></dd>
          </dl></td>
      </tr>
    </table>
    </a> </li>
  <li> <a href="#nogo">
    <table>
      <tr>
        <td><dl>
            <dt><a href="#">Artech Achi</a></dt>
            <dd><a href="#">Landscape</a></dd>
            <dd><a href="#">Plan</a></dd>
            <dd><a href="#">Design</a></dd>
            <dd class="last"><a href="#">Maps</a></dd>
          </dl></td>
      </tr>
    </table>
    </a> </li>
  <li> <a href="#nogo">
    <table>
      <tr>
        <td><dl>
            <dt><a href="#">Artech Science</a></dt>
            <dd><a href="#">Physics</a></dd>
            <dd><a href="#">Maths</a></dd>
            <dd><a href="#">Chemistry</a></dd>
            <dd class="last"><a href="#">Courses</a></dd>
          </dl></td>
      </tr>
    </table>
    </a> </li>
</ul>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
这个代码不是我的原创，我只是修改了他在IE6中不能显示的问题！如果是您写的，请联系我，我会注明出处的！

2008-05-25 10:44:18 出处：zishu.cn

本文引用地址：http://www.cnwebshow.com/edu/html/article_4807.html

热点文章/相关文章