menu horizontal 5 itens 20% linha de baixo?

olá pessoal,

tenho um menu horizontal:

<style>

#menu ul {

	padding:0px;
	margin:0px;
	background-color:#EDEDED;
	list-style:none;
 height:100px;
 width:100%;
}

#menu ul li {

 display: inline;
 }

#menu ul li a {

 width:20%;
 text-align:center;
	display: inline-block;
	background-color:#EDEDED;
	color: #333;
	text-decoration: none;
 height:100px;
}

#menu ul li a:hover {

	background-color:#D6D6D6;
}
</style>

<nav id="menu">
	<ul>
 <li><a href="javascript:;" id="fotos">Fotos</a></li>
 <li><a href="javascript:;" id="musicas">Músicas</a></li>
 <li><a href="javascript:;" id="posts">Posts</a></li>
 <li><a href="javascript:;" id="...">...</a></li>
 <li><a href="javascript:;" id="...">...</a></li>
	</ul>
</nav>

se coloco width 20% ele vai para linha de baixo, se coloco 19.7 ele não preenche todo o espaço. como faço para o menu preencher corretamente todo o espaço sem ir para linha de baixo?

obrigada!