Sin hacer pruebas.
Ese etiquetado me chirría un montón:
Cita: <div id="links"> <!-- #links -->
<span class="menuItem"><a href="noticias">NOTICIAS</a></span>
Un span conteniendo un enlace. Recuerde que el span debería diferenciar una parte del todo del mismo elemento. Esto es, un grupo de palabras dentro de un párrafo. Una parte de un enlace, etc.
Por otro lado tiene, como ya han apuntados dos elementos de línea alineados, y algunas propiedades tienen comportamientos "particulares"
Y lo más importante, la semántica o etiquetado correcto de los elementos.
Use una lista /ul-li-a/ y se evitará:
El div /links/ que sería el tag /ul/
Los spans que serían los /li/ con el borde inferior verde
Y los enlaces /a/ lo seguirán siendo, pero de bloque y con el páding correspondiente para separarlos entre ellos y del borde inferior verde.
Creo que con esta estructura no debería tener esos inconvenientes.