Question

I’m trying to create a horizontal navbar, but the list-items won’t line up for me. Can anyone see what I might have done wrong?

Here’s the html (complex structure because it’s the WordPress thesis theme + Cufon for font replacement):

<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>

And the css (tried both display: inline and float: left):

.custom ul.submenu {
margin: 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;
}

And a link to the page: http://ecgd.handsupstaging.com/about/

Thanks!

Answer 1

You have the following line in your CSS (custom.css, line 130):

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

This is overriding the float on your list items and causing the behaviour you see.