Vertical menu goes to new line when padding is set by percent - html

Question

Here is the fiddle, this is a vertical menu, floated to right. I have to use percent values (to have responsive design) but then the last menu goes underline. If I set it with "px" it works.
http://jsfiddle.net/aDRnn/
#topmenu
{
margin-top: 20px;
min-height: 47px;
background-color: red;
border-radius: 25px;
float: right;
}
#topmenu ul
{
list-style-type: none;
margin: 0 0 0 0;
padding: 13px 0 0 0;
color: #fff;
font-size: 1.6em;
}
#topmenu ul li
{
display: inline;
padding: 15px 2.5% 17px 2.5%; /* when its set with percents, it screwes */
margin: 0 0 0 0;
}
#topmenu ul li:last-child
{
border: none;
box-shadow: none;
}
#topmenu ul li:first-child
{
border-top-left-radius: 15px;
}
#topmenu ul li img
{
vertical-align: middle;
}
#topmenu a
{
color: #fff;
text-decoration: none;
height: 54px;
}
<div id="topmenu"><ul>
<li class="">
<a href="tanar">
Nyitólap</a>
</li>
<li class="">
<a href="diak">
Rólunk</a>
</li>
<li class="">
<a href="szulo">
Szállodák</a>
</li>
<li class="">
<a href="nyelviskola">
Apartmanok</a>
</li>
<li class="">
<a href="boltok">
Gourmentteszt</a>
</li>
</ul>
<div style="clear:both;"></div></div>

Answer 1

You have a float:right on the #topmenu, but you need a float:left to his children "ul". Also, if you want to have "li" paddings and margins, you need to also float them left.