在一般的网页制作中,这样的菜单是非常常用的。
而构成的技巧是非常简单易学的。
公布代码如下,稍看一下就应该能够理解!
XHTML代码:
%26lt;div id="topmenu"%26gt;
%26lt;ul%26gt;
%26lt;li%26gt;%26lt;a href="http://www.52css.com/default.asp?tag=Web Standard"%26gt;Web Designing with Web Standards%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://www.52css.com/default.asp?tag=CSS Templates"%26gt;CSS Templates%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://www.52css.com/default.asp?tag=CSS Layout Templates"%26gt;CSS Layout Templates%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://www.52css.com/default.asp?tag=CSS Layout Example"%26gt;CSS Layout Example%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://www.52css.com/default.asp?tag=CSS Web Design"%26gt;CSS Web Design%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://www.52css.com/default.asp?tag=Div CSS网页布局"%26gt;Div CSS网页布局%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://www.52css.com/default.asp?tag=Web2.0标准网页"%26gt;Web2.0标准网页%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;/ul%26gt;
%26lt;/div%26gt;
%26lt;ul%26gt;
%26lt;li%26gt;%26lt;a href="http://www.52css.com/default.asp?tag=Web Standard"%26gt;Web Designing with Web Standards%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://www.52css.com/default.asp?tag=CSS Templates"%26gt;CSS Templates%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://www.52css.com/default.asp?tag=CSS Layout Templates"%26gt;CSS Layout Templates%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://www.52css.com/default.asp?tag=CSS Layout Example"%26gt;CSS Layout Example%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://www.52css.com/default.asp?tag=CSS Web Design"%26gt;CSS Web Design%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://www.52css.com/default.asp?tag=Div CSS网页布局"%26gt;Div CSS网页布局%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://www.52css.com/default.asp?tag=Web2.0标准网页"%26gt;Web2.0标准网页%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;/ul%26gt;
%26lt;/div%26gt;
CSS代码:
*{
font-size:12px;
}
#topmenu {
width:900px;float:left;background:#ccc;
}
#topmenu ul{
list-style-type: none;
margin:10px 0 10px 40px;
padding: 0px;
}
#topmenu li{
display:inline;padding:0 5px;
}
#topmenu li a{
color:#000;
text-decoration:none;
}
#topmenu li a:hover{
color:#f00;
}
font-size:12px;
}
#topmenu {
width:900px;float:left;background:#ccc;
}
#topmenu ul{
list-style-type: none;
margin:10px 0 10px 40px;
padding: 0px;
}
#topmenu li{
display:inline;padding:0 5px;
}
#topmenu li a{
color:#000;
text-decoration:none;
}
#topmenu li a:hover{
color:#f00;
}
查看运行效果:

