16素材
您现在的位置:首页 > 教程中心 > DIV+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<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>

 
关键词:

相关素材

联系客服 加入QQ群