Menu Bar Not Stretching Full Length of Cell - html

Question

I have a menu bar that isn't stretching the entire length of the div it is in. I have 6 main menu options and I want these to stretch across the entire div tag they are in and not just take up the exact spacing of the words. I've tried to set the div and the menu elements to 100% width, but nothing is working. My code is listed below.
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,a:visited {
display: block;
width: 100%;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,a:active {
background-color: #7A991A;
}
.testmenu {
width: 100%;
}
HTML
<div class="testmenu">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>

Answer 1

Here's an edit I made from your code:
http://jsfiddle.net/fatgamer85/grLkE/
I've added few classes to the list and list items.
I've made the list width 100% to fill the area (I'm assuming menu bar?), then removed the float from list items, made them inline, and added padding to the items
.menu-item{
display: inline-block;
padding: 2%;
}
and this is how it looks:
http://jsfiddle.net/fatgamer85/grLkE/embedded/result/
Hope this helps.

Answer 2

Change
li{float:left;}
to
li{display:inline-block;width:25%;margin:0;padding:0;}
Fiddle here.

Answer 3

you can give the UL a width of 100%, and then the li each a width of 25%
the css that you have compiles to give the testmenu a 100% width, and then YOU have to explicitly tell the UL and LI how much width they should have.

Answer 4

ul {
list-style-type: none;
overflow: hidden;
display:table-row;
}
li {
display:table-cell;
border:1px solid black;
}
a:link,a:visited {
display: block;
width: 100%;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,a:active {
background-color: #7A991A;
}
.testmenu {
width: 100%;
display:table;
table-layout:auto;
}