CSS horizontal menu links issue - css

Question

I've got a simple (horizontal) CSS menu list with a problem. The links in the list are only active up to a certain point, for example menu item four in my list doesn't work, 1, 2, and 3 are fine. By not working I mean both 'hover' and hyperlinking actions are gone.
It's got something to do with the 'float' and 'overflow' attributes, if I don't float the #nav element and remove 'overflow:hidden', I can get all the links working but the formatting is screwed, to a greater or lesser degree, depending on the browser.
The code is below, any help would be great. Oh and the commented left and right 50% attributes were there because if I centred the menu none of the links worked :-(
<div id="nav">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
#nav
{
float: left;
height:30px;
width: 940px;
margin:0;
position: relative;
overflow: hidden;
white-space: nowrap;
font-family: Helvetica Neue, Helvetica, Verdana, sans-serif;
font-size: 20px;
font-weight: 200;
background-color: #333333;
list-style-type: none;
}
#nav ul
{
margin:0;
padding-left: 0;
/*left: 50%;*/
}
#nav ul li
{
display: inline;
list-style: none;
padding: 2px 6px 2px 6px;
/*right:50%;*/
}
#nav ul li a
{
float: left;
display: block;
display: inline;
text-decoration: none;
color: #ffffff;
padding:3px;
text-align: left;
}
#nav li a:hover { color: #6698FF;}
#nav li a.active { color: #6698FF;}

Answer 1

The style for #nav ul li a seems weird: using float:left with display:inline is asking for trouble. Since you are already floating the parent element (li) , i don't think you need to float the a element. I'm not sure which kind of menu you wish to achieve, but usually, you float the ul li, and display:block the A inside.
So, try changing this:
#nav ul li a
{
float: left;
display: block;
display: inline;
text-decoration: none;
color: #ffffff;
padding:3px;
text-align: left;
}
to this
#nav ul li a
{
display: block;
text-decoration: none;
color: #ffffff;
padding:3px;
text-align: left;
}

Answer 2

Try making the following adjustments to your css below.
#nav ul li a
{
float: left;
display: inline-block;
text-decoration: none;
color: #ffffff;
padding:3px;
text-align: left;
}
#nav ul li a:hover, #nav ul li a.active
{
color: #6698FF;
}

Answer 3

I'm not sure I understand exactly what you want this to look like. But, by "simple (horizontal) CSS menu list" I assume you are looking for all the links lined up on the background?
Try this:
#nav {
height:30px;
width: 940px;
margin:0;
white-space: nowrap;
font-family: Helvetica Neue, Helvetica, Verdana, sans-serif;
font-size: 20px;
font-weight: 200;
background-color: #333333;
}
#nav ul {
margin:0;
padding-left: 0;
list-style: none;
}
#nav ul li {
float: left;
display: inline;
padding: 2px 6px 2px 6px;
}
#nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding:3px;
}
#nav li a:hover { color: #6698FF;}
#nav li a.active { color: #6698FF;}
All you need to do is float the lis whichever direction you want them. For more flexibility, remove the height from #nav and put overflow: hidden; back in it's place. That way the height will be determined by the contents: a more solid solution.
If you want the list centered, make these changes to it:
#nav ul {
margin:0;
padding-left: 0;
list-style: none;
text-align: center;
}
#nav ul li {
display: inline;
padding: 2px 6px 2px 6px;
}
#nav ul li a {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
#display: inline;
#vertical-align: auto;
text-decoration: none;
color: #ffffff;
padding:3px;
}
(all that junk under #nav ul li a is simply a cross-browser method for reliable inline-block declarations)