css - 无法让列表项水平排列

Question

我正在尝试创建一个水平导航栏，但列表项不会为我排列。谁能看到我可能做错了什么？

这是html(结构复杂，因为它是Wordpress论文主题+字体替换的Cufon):

<ul class="menu"> 
<li class="tab tab-home"><a href="http://ecgd.handsupstaging.com">Home</a></li> 
<li class="tab tab-1 current"><a href="http://ecgd.handsupstaging.com/about/"         title="About">About<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="submenu submenu-1"> 
<li class="item item-1"><a href="http://ecgd.handsupstaging.com/about/subnavigation-page/" title="Subnavigation page">Subnavigation page</a></li> 
<li class="item item-2"><a href="http://ecgd.handsupstaging.com/about/sub-page/" title="Sub-page">Sub-page</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="tab tab-2"><a href="http://ecgd.handsupstaging.com/blog/" title="Blog">Blog<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="submenu submenu-1"> 
<li class="item item-3"><a href="http://ecgd.handsupstaging.com/blog/another-sub-page/" title="Another sub-page">Another sub-page</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
</ul>

和 css(尝试了 display: inline 和 float: left):

.custom ul.submenu { 边距:0px 0 0 0；

.custom ul.submenu a {
font-size: 1.3em;
text-transform: none;
}

.custom ul.menu li ul.submenu li.item {
display: none;
}

.custom ul.menu li.current ul.submenu {
width: 500px;
}

.custom ul.menu li.current ul.submenu li.item {
display: inline;
white-space: nowrap;
float: left;
}

.custom ul.menu li.current ul.submenu li.item  a {
background-color: transparent;
display: inline;
float: left;
}

页面链接:http://ecgd.handsupstaging.com/about/

谢谢!

Answer 1

您的 CSS(custom.css，第 130 行)中有以下行:

.custom .menu ul li { clear: both; }

这会覆盖列表项上的 float 并导致您看到的行为。