Menu buga ao trocar de monitor

Bom dia! Estou com um problema no menu do meu site.

Hoje ao abrir ele no meu computador de mesa ele fica normal, porém, ao abrir no notebook ele desconfigura

Imagem dele desconfigurado:

/applications/core/interface/imageproxy/imageproxy.php?img=http://puu.sh/fWuI7/1356e6f50a.jpg&key=f57ffc458cd76d47b56747d2139c0cd47d41b6af3d643d096256c4fcd0990a7f" alt="1356e6f50a.jpg" />

Alguém pode me auxiliar para tornar ele adaptavel a qualquer resolução?

Código HTML:

<div id="menu">
<ul>
<li><a href="index">Inicio</a></li>
<li>|</a></li>
<li><a href="info">Informações</a></li>
<li>|</a></li>
<li><a href="painel" target="_blank">Painel</a></li>
<li>|</a></li>
<li><a href="downloads">Downloads</a></li>
<li>|</a></li>
<li><a href="regras">Regras</a></li>
<li>|</a></li>
<li><a href="rankings">Rankings</a></li>
<li>|</a></li>
<li><a href="equipe">Equipe</a></li>
<li>|</a></li>
<li><a href="donation">Doações</a></li>
<li>|</a></li>
<li><a href="../forum/" target="_blank">Fórum</a></li>
<li>|</a></li>
<li><a href="formulario">Contato</a></li>
</ul>
</div>

Código CSS:

#menu {
height: 50px;
line-height: 50px;
background: url(../images/menu.png) no-repeat;
background-position: top center;
}

#menu ul {

padding-left: 420px;
list-style-type: none;
}

#menu ul li {

display: block;
float: left;
text-align: center;
}

#menu ul li a {

color: #eee;
padding: 0 10px;
text-decoration: none;
font-weight: 600;
}

#menu ul li a:hover {

color: #92ff04;
text-decoration: underline;
}