下拉菜单两种样式

时间：2008-03-21 来源：anglexiaomin

秒下面的为竖向的下拉加JS 效果:

</head>
<body >
<ul id="nav">
<li>
  <a href="">文章</a>
  <ul>
   <li><a href="">CSS教程</a></li>
   <li><a href="">DOM教程</a></li>
   <li><a href="">XML教程</a></li>
  </ul>
</li>

<li>
  <a href="">参考</a>
  <ul>
   <li><a href="">XHTML</a></li>
   <li><a href="">XML</a></li>
   <li><a href="">XHTML</a></li>
  </ul>
</li>

<li>
  <a href="">Blog</a>
  <ul>
   <li><a href="">全部</a></li>
   <li><a href="">网页</a></li>
   <li><a href="">XHTML</a></li>
  </ul>
</li>
</ul>

</body>
</html>

下面的是横向的下拉:

/* 导航条一级菜单项设置 */
#nav li {
   float: left;
   width: 160px;
   margin: 3px auto auto 3px;
}

/* 导航条一级菜单项链接设置 */
#nav li a {
   display: block;
   font-size: 12px;
   border: 1px solid black;
   padding: 3px;
   text-decoration: none;
   color: #777;
   text-align: center;
   background: #ccc;

}

/* 导航条一级菜单链接鼠标放上后的设置 */
#nav li a:hover{
   background: red;
}

/* 二级子菜单 */
#nav li ul{
   display: none;
   background: #cccccc;
   list-style: none;
   padding: 0px;
    margin: 0px;
}

/* 一级菜单鼠标放上后二级菜单的设置 */
#nav li:hover ul, #nav li.over ul{
   display: block;
}

/* 二级菜单项 */
#nav li ul li {
   float: left;
   width: 160px;
   background: green;
   margin: 0px;
}

/* 二级菜单项链接设置 */
#nav li ul li a{
   display: block;
   font-size: 12px;
   border: 1px solid black;
   padding: 3px;
   text-decoration: none;
   color: #777;
   text-align: center;
   margin: 0px;
   padding: 3px;
    background: green;
    color: black;
}

/* 二级菜单项鼠标放上后的设置 */
#nav li ul li a:hover{
color: black;
background: white;
}
</style>

</body>
</html>