CSS下拉导航菜单

7次阅读

大量的 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<itle>
<!–[if IE 7]><!–>
<link rel="stylesheet" type="text/css" href="menu1.css" />
<!–<![endif]–>
<!–[if lte IE 6]><link rel="stylesheet" type="text/css" href="menu2.css" /><![endif]–>
<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
   <!–[if IE 7]><!–>
   </a>
   <!–<![endif]–>
   <table>
     <tr>
       <td><ul>
           <li><a href="#"> 栏目 1 –> 菜单 1 </a></li>
           <li><a href="52css.comhttp://www.52css.com">52css.com</a></li>
           <li><a href="#"> 栏目 1 –> 菜单 3 </a></li>
           <li><a href="#"> 栏目 1 –> 菜单 4 </a></li>
         </ul><d>
     <r>
   <able>
   <!–[if lte IE 6]>
           </a>
           <![endif]–>
</li>
<li> <a href="#"> 栏目 2
   <!–[if IE 7]><!–>
   </a>
   <!–<![endif]–>
   <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><d>
     <r>
   <able>
   <!–[if lte IE 6]>
           </a>
           <![endif]–>
</li>
<li> <a href="#"> 栏目 3
   <!–[if IE 7]><!–>
   </a>
   <!–<![endif]–>
   <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><d>
     <r>
   <able>
   <!–[if lte IE 6]>
           </a>
           <![endif]–>
</li>
</ul>
</body>
</html>