Albo nie zrozumiałem albo odpowiedziałeś mi tylko na to pytanie :
Aby przesunąć menu wyżej, ustaw ujemną wartość marginesu, np.:
#menu {
margin-top: -15px;
}
Hm, przyciski Ci odpowiednio zmniejszyłem, zaokrągliłem, teraz cały link tworzy obszar klikalny. Coś jeszcze? 
Dzięki ale chodziło mi raczej o wytłumaczenie niż zrobienie całej roboty za mnie.
Także, nadal nie wiem o co chodzi proszę o dalsze podpowiedzi.
Hm, to z przyzwyczajenia, teraz każdy czeka raczej na gotowiec, podoba mi się takie podejście 
Więc, oto co zrobiłem:
ty nadałeś tło dla li, przez co cały obszar nie był klikalny. Ja ustawiłem tło dla odnośnika (a), przez co cały obszar jest klikalny, ustawiłem też padding dla linku, aby poszerzyć tło. Dodałem też zaokrąglenia w border-radius (fajny generator: http://border-radius.com/). Ustawiłem też rodzinę czcionek Times New Roman dla całego dokumentu, usunąłem te divy z początku kodu HTML.
Czy coś jeszcze trzeba wytłumaczyć?