I'm having trouble aligning the list-items in my horizontal navbar. Can anyone assist me in identifying the error?
Below is the HTML code, which has a complex structure due to the use of the Wordpress thesis theme and 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>
Here is the CSS code I've used (attempted 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;
}
For reference, I have also included a link to the page in question:
Your help is much appreciated!