纯CSS二级NAV的实现

CSS样式:

#nav {padding:0; list-style:none; position:relative; float:left;z-index:100;/*前面的代码不可修改，总个nav 的长度*/width:600px;}
#nav{left:0 !important;left:-80px;}/*CSS HACK 为使在IE及FF下NAV 左边不留空位*/
#nav li {display:inline; float:left;}
#nav li a.tl {display:block; /*前面的代码不可修改，一级nav 的单个宽度、高度*/width:150px; height:25px;/*height 的值要跟#nav :hover div中的top指定的值一样*/ text-decoration:none; line-height:20px; font-size:12px; color:#000;
}

#nav div {display:none;/*不可修改*/}

#nav li a:hover {white-space:normal;/*不可修改*/}
#nav li:hover>a {white-space:normal;/*不可修改*/}

#nav :hover div
{display:block; position:absolute;/*前面的代码不可修改，后面对二级nav位置的定位及长度、高度*/ background:#faebd7; left:0;  width:500px;top:25px; border:1px solid #888; padding-bottom:10px;}

#nav .t2:hover {position:relative;}
/*修改二级nav 内标签的样式以"#nav :hover div" 开头，如下:
#nav :hover div a:hover{color:#546321;padding:0 20px;}*/

 

html格式:

jee.remind
   
   
   
   
   

 
 link1  link2  link3
 

   
 

 

只要有CSS基础的就能看得懂,根据代码附注做修改就可以了。我个人的做法会多一步，就是将这整个UL嵌套一个DIV中，用这个DIV作定位。喜欢的话帮忙加加人气拉