页面代码
<div><ul>
<li><a title="首页" href="https://www.w3cn.org/">Home</a></li>
<li><a title="关于我们" href="https://www.w3cn.org/aboutus.html">关于我们</a></li>
<li><a title="网站标准" href="https://www.w3cn.org/webstandards.html">网站标准</a></li>
<li><a title="标准的好处" href="https://www.w3cn.org/benefits.html">标准的好处</a></li>
<li><a title="怎样过渡" href="https://www.w3cn.org/howto.html">怎样过渡</a></li>
<li><a title="相关教程" href="https://www.w3cn.org/tutorial.html">相关教程</a></li>
<li><a title="工具" href="https://www.w3cn.org/tools.html">工具</a></li>
<li><a title="资源及链接" href="https://www.w3cn.org/resources.html">资源及链接</a></li>
<li><a title="常见问题" href="https://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}
#submenu ul li#two A { WIDTH: 80px}
#submenu ul li#three A { WIDTH: 80px}
#submenu ul li#four A { WIDTH: 90px}
#submenu ul li#five A { WIDTH: 80px}
#submenu ul li#six A { WIDTH: 80px}
#submenu ul li#seven A { WIDTH: 60px}
#submenu ul li#eight A { WIDTH: 90px}
#submenu ul li#nine A { WIDTH: 80px}
以上代码不逐一分析了。横向菜单的关键在于：定义<li>样式时的"FLOAT: left;"语句。另外注意UL定义中的DISPLAY:inline;一句表示将li强制作为内联对象呈递，从对象中删除行，通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度，控制菜单的间隔。好了，你也可以动手试试，用li实现各种各样的菜单样式。
Tips:如果你子菜单的宽度总和大于层的宽度，菜单会自动折行，利用这个原理可以实现单个无序列表的2列或者3列排版，这是原来HTML很难实现的。
感谢zhuweiwei指出横向菜单的bug，本文7月6日修正。