Изменить #mainNav li с display:block; на display:inline-block;. Только что попробовал в firebug, меню перемещается в нужное место.
Проблема в том, что display:block или display:inline li имеет нулевую ширину (несмотря на внутреннее содержимое), и поэтому все элементы li смещены влево. display:inline-block заставляет растягиваться, чтобы включить внутреннее содержимое.
Вы можете увидеть, что элемент area выделяется, если навести на него курсор мыши на вкладке html в firebug.