CSS horizontal menu links issue

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><a href="#" class="active">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></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)