CSS下拉导航

下拉导航

BODY部分

<ul id="nav2">

<li><a href="">文章</a>

<ul>

   <li><a href="">CSS教程</a></li>

   <li><a href="">DOM教程</a></li>

   <li><a href="">XML教程</a></li>

   <li><a href="">FLASH教程</a></li>

</ul>

</li>

<li><a href="">交流</a>

<ul>

   <li><a href="">CSS应用</a></li>

<li><a href="">XML应用</a></li>

   <li><a href="">FLASHAS编程</a></li>

   <li><a href="">DW网页制作</a></li>

</ul>

</li>

<li><a href="">博客</a>

<ul>

   <li><a href="">全部</a></li>

   <li><a href="">网页特效</a></li>

   <li><a href="">高级编程</a></li>

   <li><a href="">FLASH动画</a></li>

</ul>

</li>

</ul>

CSS部分

ul#nav2 {

padding:0px;

margin:0px;

list-style:none;

}

ul#nav2 li {

float:left;

width:160px;

}

ul#nav2 li a{

display:block;

border:1px solid #c5c6c4;

text-decoration:none;

color:#000;

}

ul#nav2 li ul { /*设置下拉菜单不可见，只有当鼠标经过使才可见*/

display:none;

top:20px;

}

ul#nav2 li:hover ul,ul#nav2 li:over ul {

display:block;

}

ul#nav2 li ul li a {      /*对下拉菜单中的项进行修饰*/

display:block;

font-size:12px;

border:1px solid #ccc;

padding:3px;

text-decoration:none;

color:#777;

}

ul#nav2 li ul li a:hover {

background-color:#f4f4f4;

}