Responsive navigation, can't define width/height in percent - html

Question

So I'm trying to build a responsive navigation menu that'll scale with media queries.
The problem is (and it's a stupid one I can't work out) that I can't get the a tags to appear as block level elements(I think).
Here's the HTML:
<div class="navbuttons">
<ul>
<li>Home</li>
<li>About</li>
<li>Expertise</li>
<li>Capabilities</li>
<li>Case Studies</li>
<li>Contact</li>
</ul>
</div> <!-- end div navbuttons -->
And the CSS:
.navbuttons {
position: relative;
height: 100px;
width: 50%;
background-color: blue;
float: left;
transition:all .2s linear;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.navbuttons ul {
list-style: none;
margin:0;
padding:0;
float: left;
}
.navbuttons li {
float:left;
}
.navbuttons li a {
background: #444;
display: block;
float: left;
line-height: 100px;
height: 100%;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 16.5%;
}
Yet, if I use px to define width/height, I can get it looking roughly how I want (though it obviously isn't fluid, like I need).
.navbuttons {
position: relative;
height: 100px;
width: 50%;
background-color: blue;
float: left;
transition:all .2s linear;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.navbuttons ul {
list-style: none;
margin:0;
padding:0;
float: left;
}
.navbuttons li {
float:left;
}
.navbuttons li a {
background: #444;
display: block;
float: left;
line-height: 100px;
height: 100px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100px;
}
Where am going wrong?

Answer 1

The A tags are indeed block level once you specify display: block; on them, however, the 16.5% is calculated from their natural width (i.e. their 100% width based on the inner text).
Depending on your needs, you may want to remove the width parameter and simply add padding. See: http://jsfiddle.net/bLS6B/. This way, the width is dependent on the navigation text, not some preset width. Alternatively, you can specify 120% which has a similar effect.