resizing menu buttons for mobile devices

resizing menu buttons for mobile devices

I'm currently sorting my site out for mobile devices and small screens and
I'm a bit stuck with how to size my menu. I have 8 menu buttons as part of
a unordered list, as below:
<ul class="menu">
<li class="menubar"><a class="menulink" href="/">Home</a></li>
..
.. total of 8 <li> menu buttons
</ul>
The 'menulink' a class sets each link to 128px. Times that by 8 and it
lines up perfectly to my page width of 1024px. I am using @media query to
target the changes and on mobile devices want there to be two lines of 4
buttons. The combined width of four buttons needs to equal the screen
width I guess. How would I achieve this?
My CSS for the menu is below:
.menu{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;}
li.menubar{float:left;}
a.menulink{
display:block;
width:128px;
background-color:#333333;
text-align:center;
padding-top:5px;
padding-bottom: 5px;
text-decoration:none;
text-transform:uppercase;}