creo que el fallo está en esta parte:
#navbar li:hover ul { position: absolute;
display: inline;
margin-top: 28px; }
al poner
display:inline; le indicas que se muestre en la misma línea, osea, a continuación del
"segundo item". como justo al lado está el
"tercer item", el submenú no tiene más remedio que apilarse justo debajo. para solucionar esto, cambia el
display por este:
display:block;
espero que te sirva (a mí me ha funcionado)
