下拉导航
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;
}
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;
}