<div id="submenu">
<ul>
<li id="one"><a title="首页" href="">Home</a></li>
<li id="two"><a title="关于我们" href="">关于我们</a></li>
<li id="three"><a title="网站标准" href="">网站标准</a></li>
<li id="four"><a title="标准的好处" href="">标准的好处</a></li>
<li id="five"><a title="怎样过渡" href="">怎样过渡</a></li>
<li id="six"><a title="相关教程" href="">相关教程</a></li>
<li id="seven"><a title="工具" href="">工具</a></li>
<li id="eight"><a title="资源及链接" href="">资源及链接</a></li>
<li id="nine"><a title="常见问题" href="">常见问题</a></li>
</ul>
</div>

样式表代码

Example Source Code []

#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(/uploads/divcss/d2006122221544.gif) transparent no-repeat 2px 8px;
FONT-WEIGHT: bold;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}

#submenu li a:hover {
BACKGROUND: url(/uploads/divcss/42006122221553.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很难实现的。