一款非常经典纯CSS下拉导航菜单

2009-04-26 00:36:41 作者：admin 来源：浏览次数：0 网友评论 0 条

大量的CSS网页布局实例中，包括了很多CSS菜单方面的知识与案例

大量的CSS网页布局实例中，包括了很多CSS菜单方面的知识与案例，但是大家对这些知识的学习依然非常热衷。今天向大家介绍一款，非常经典的，纯CSS实现的下拉导航菜单，此案例中的浏览器条件注释信息也值得大家学习。

代码：

<!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" />
<title>css下拉菜单 - 52css.com</title>

<link rel="stylesheet" type="text/css" href="menu1.css" />


<style>
@charset "utf-8";
/* CSS Document */
body {
    font-family:verdana, sans-serif;
    font-size:small;
}
#navigation , #navigation li ul{
    padding:0;
    margin:0;
    list-style-type: none;
}
#navigation li {
    float:left;
    text-align:center;
    position:relative;
}
#navigation li h3 {
    margin:0;
}
#navigation li a:link, #navigation li a:visited {
    display:block;
    text-decoration:none;
    color:#000;
    width:120px;
    height:30px;
    line-height:30px;
    border:1px solid #fff;
    border-width:1px 1px 0 0;
    background:#c5dbf2;
    padding-left:10px;
}
#navigation li ul {
    display: none;
}
table {
    margin:-1px;
    border-collapse:collapse;
}
/* 以下只支持非IE6浏览器 */
#navigation li:hover a {
    color:#fff;
    background:#ff0000;
}
#navigation li:hover ul {
    display:block;
    position:absolute;
    top:30px;
    margin-top:1px;
    left:0;
    width:120px;
}
#navigation li:hover ul li a {
    display:block;
    background:#c5dbf2;
    color:#000;
    height:15px;
    line-height:15px;
    padding:5px 10px;
    width:110px;
}
#navigation li:hover ul li a:hover {
    color:#fff;
    background:#647413;
}

body
{ font-family:verdana, sans-serif; font-size:small;}
#navigation ,
#navigation li ul{ padding:0; margin:0; list-style-type: none;}
#navigation li { float:left; text-align:center; position:relative;
}#navigation li h3 { margin:0; }
#navigation li a:link, #navigation li a:visited { display:block; text-decoration:none; color:#000; width:120px; height:40px; line-height:40px; border:1px solid #fff; border-width:1px 1px 0 0; background:#c5dbf2; padding-left:10px; }
#navigation li ul{ display: none;}table { margin:-1px; border-collapse:collapse;}/* IE6浏览器专用 */
#navigation li a:hover { color:#fff; background:#2687eb;}
#navigation li a:hover ul { display:block; position:absolute; top:40px; margin-top:1px; left:0; width:120px;}
#navigation li a:hover ul li a { display:block; background:#c5dbf2; color:#000; height:20px; line-height:20px; padding:5px 10px; width:110px;}
#navigation li a:hover ul li a:hover { color:#fff; background:#6b839c; }

</style>
</head>
<body>
<ul >
<li> <a href="#">栏目1
    
    </a>
    
    <table>
      <tr>
        <td><ul>
            <li><a href="#">栏目1-->菜单1</a></li>
            <li><a href="http://www.52css.com">52css.com</a></li>
            <li><a href="#">栏目1-->菜单3</a></li>
            <li><a href="#">栏目1-->菜单4</a></li>
          </ul></td>
      </tr>
    </table>
    
</li>
<li> <a href="#">栏目2
    
    </a>
    
    <table>
      <tr>
        <td><ul>
            <li><a href="#">栏目2-->菜单1</a></li>
            <li><a href="#">栏目2-->菜单2</a></li>
            <li><a href="#">栏目2-->菜单3</a></li>
            <li><a href="#">栏目2-->菜单4</a></li>
            <li><a href="#">栏目2-->菜单5</a></li>
          </ul></td>
      </tr>
    </table>
    
</li>
<li> <a href="#">栏目3
    
    </a>
    
    <table>
      <tr>
        <td><ul>
            <li><a href="#">栏目3-->菜单1</a></li>
            <li><a href="#">栏目3-->菜单2</a></li>
            <li><a href="#">栏目3-->菜单3</a></li>
          </ul></td>
      </tr>
    </table>
    
</li>
</ul>
</body>
</html>

关键词：CSS下拉导航菜单