Navigation bar collapsing when shrinking window

Navigation bar collapsing when shrinking window

First off here is the code:
#menu {
padding:0;
margin-top:0px;
position:absolute;
top:0px;
width:100%;
float:left;
overflow:hidden;
}
#menu li {
list-style:none;
float: left;
position: relative;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border:1px solid black;
background-image: linear-gradient(#F2FF00, #AEFF00);
margin-left:10px;
}
#menu a {
display:block;
padding:auto;
text-align:center;
padding:10px 10px;
color: #0095FF;
text-transform: uppercase;
font: bold 25px Arial, Helvetica;
text-decoration: none;
text-shadow: 1px 1px 2px #0095FF;
}
The buttons move down when I shrink the window. If can set the height to
menu so it wont change, but still the buttons go outside of the menu
element, why does this happen?
Here is jsFiddle:http://jsfiddle.net/nqdXc/