使用Web标准建站第11天:不用表格的菜单(3) <ul><li id="one"><a title="首页" href="http://www.w3cn.org/">Home</a></li><li id="two"><a title="关于我们" href="http://www.w3cn.org/aboutus.html">关于我们</a></li><li id="three"><a title="网站标准" href="http://www.w3cn.org/webstandards.html">网站标准</a></li><li id="four"><a title="标准的好处" href="http://www.w3cn.org/benefits.html">标准的好处</a></li><li id="five"><a title="怎样过渡" href="http://www.w3cn.org/howto.html">怎样过渡</a></li><li id="six"><a title="相关教程" href="http://www.w3cn.org/tutorial.html">相关教程</a></li><li id="seven"><a title="工具" href="http://www.w3cn.org/tools.html">工具</a></li><li id="eight"><a title="资源及链接" href="http://www.w3cn.org/resources.html">资源及链接</a></li><li id="nine"><a title="常见问题" href="http://www.w3cn.org/faq.html">常见问题</a></li></ul></div>
样式表代码
#submenu { MARGIN: 0px 8px 0px 8px; PADDING: 4px 0px 0px 0px; BORDER: #fff 1px solid; BACKGROUND: #dfdfdf; COLOR: #666; HEIGHT:25px; } #submenu ul { CLEAR: left; MARGIN: 0px; PADDING:0px; BORDER: 0px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center; DISPLAY:inline;} #submenu li { FLOAT: left; DISPLAY: block; MARGIN: 0px; PADDING: 0px; TEXT-ALIGN: center} #submenu li a { DISPLAY: block; PADDING:2px 3px 2px 3px; BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; FONT-WEIGHT: bold; WIDTH: 100%; COLOR: #444; TEXT-DECORATION: none; } #submenu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px; COLOR: #fff; } #submenu ul li#one A { WIDTH: 60px}