如何用 CSS 制作横向菜单?
.test2 ul{list-style:none;}.test3 ul{list-style:none;}.test4 ul{list-style:none;}.test5
ul{list-style:none;width:300px;}.test3 li{float:left;}.test4 li
{float:left;width:100px;}.test5 li{float:left;width:100px;}.test6 ul{list-style:none;}.test6
li{float:left;width:100px;}.test6 a:link{color:#666;background:#CCC;text-
decoration:none;}.test6 a:visited{color:#666;text-decoration:underline;}.test6 a:hover{color:#FFF;
font-weight:bold;text-decoration:none;background:#F00;}.test7 ul{list-
style:none;}.test7
li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}.test7
a{display:block;text-align:center;height:30px;}.test7 a:link
{color:#666;background:#CCC;text-decoration:none;}.test7
a:visited{color:#666;text-decoration:underline;}.test7 a:hover{color:#FFF; font-weight:bold;text-
decoration:underline;background:#F00;}.test8 ul{list-style:none;}.test8
li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}.test8
a{display:block;text
-align:center;height:30px;}.test8 a:link{color:#666;background:url(images/arrow_off.gif) #CCC
no-repeat 5px 12px;text-decoration:none;}.test8 a:visited{color:#666;text-
decoration:underline;}.test8 a:hover{color:#FFF;
font-weight:bold;text-decoration:none;background:url(images/arrow_on.gif) #F00 no-repeat 5px
12px;}尽管在我的网站和文章里都有提
到 CSS 制作菜单的方法,但很多初学者还是不太清楚如何实现,以及实现原理,我想专门
写一篇详细教程会对大家比较有帮助。www.huaxuezhuji.com
我们先来看一个菜单的例子,最终效果是:
评论0
最新资源