Width of elements in a menu bar consisting of lists - html

Question

I got a menu bar on my website which is consisting of lists. The html looks like this:
<div id="menu">
<ul class="menu">
<li class="menu"><a class="menu" href="#">HOME</a></li>
<li class="menu"><a class="menu" href="#">MOSAIC</a></li>
<li class="menu"><a class="menu" href="#">SUCCESS</a></li>
<li class="menu"><a class="menu" href="#">MEMBERS</a></li>
<li class="menu"><a class="menu" href="#">CONTACT</a></li>
</ul>
</div>
And the css looks like this:
#menu {
margin-left: 10%;
border-top:1px solid white;
border-bottom:1px solid white;
left:0;
width:80%;
height:2.2em;
background:#576361;
overflow:hidden;
position:absolute;
}
ul.menu {
float:middle;
width:100%;
padding:0;
margin:0 auto;
list-style-type:none;
}
a.menu {
text-align:center;
float:left;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
And my menubar looks like following at the moment:
It just takes 80% of the sites width, but the 5 elements doesn't take 20% of the 80% as expected. How can I fix my issue ? It would be also pretty awesome if you could explain to me how the correct answer is working if it is not obvious and self explaining.

Answer 1

My opinion is to use table-cell and apply the style in li element not in children ones like this:
#menu {
border-top:1px solid white;
border-bottom:1px solid white;
left:0;
width:80%;
height:2.2em;
background:#576361;
position:relative;
margin: 0 auto;
}
ul.menu {
width:100%;
padding:0;
margin: 0 auto;
list-style-type:none;
}
ul{
display:table;
}
li{
display:table-cell;
text-align:center;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-left:1px solid white;
vertical-align: middle;
}
fiddle

Answer 2

Any borders or padding will add to the width of the elements until you tell them not to with
box-sizing: border-box;
JSFiddle Demo
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#menu {
margin: 0 auto;
border-top:1px solid white;
border-bottom:1px solid white;
width:80%;
height:2.2em;
background:#576361;
overflow:hidden;}
ul.menu {
width:100%;
padding:0;
margin:0 auto;
list-style-type:none;
}
a.menu {
text-align:center;
float:left;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}

Answer 3

You are using borders.
Borders add 2px to every element.
box-sizing: border-box;
Is the solution
http://jsfiddle.net/Hc3au/

Answer 4

You need to change the position of #menu to relative or add an wrapper containing the list. I'm also pretty sure there is no float: middle, just right and left ( and none and inherit ).
Also I do prefer the following:
ul.menu > li
{
width: 20%;
}
ul.menu > li > a
{
width: 100%;
}
Why do you use the menu class on every element?