[CSS]Rozwijane menu Opcje

[--kierzniak--]

Majac taki styl i kod w htmlu nie umiem zrobic zeby kolejne menu bylo po prawej stronie poprzedniego. Wszytko wstawia sie podspodem

[HTML] pobierz, plaintext 
<div id="menu"> <p>Menu</p>
<ul>
<li><a href="#">Strona Główna</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>
[HTML] pobierz, plaintext 

CSS

[HTML] pobierz, plaintext 
body { /* nasza całą strona */
background-color: #FFFFFF; /* kolor strony */
font-family: Verdana, Sans-serif; /* krój czcionki */
font-size: 10px; } /* rozmiar czcionki */
 
#menu { /* div "menu" */
width: 150px; /* szerokość */
border: 1px solid #D3D3D3; /* obrazmowanie */
height: 30px; /* wysokość */
overflow: hidden; } /* przycinanie */
 
#menu:hover { /* najechane menu */
width: 150px; /* szerokość */
height: 100%; } /* wysokość (wartość musi być 100% lub "auto" */
 
ul { /* ul */
margin: 0px; /* margines */
padding: 0px; } /* odstęp */
 
li { /* li */
list-style-type: none; /* rodzaj wykazu */
width: 150px;} /* szerokość */
 
li a { /* linki */
text-decoration: none; /* dekoracja linka */
display: block; /* rodzaj wyświetlenia elementów */
width: 150px; /* szerokość */
padding: 5px; /* odległości */
color: #3B3B3B; } /* kolor linka */
 
li a:hover { /* najechany link */
text-decoration: none; /* dekoracja tekstu */
color: #3B3B3B; /* kolor linka */
width: 150px; /* szerokość */
padding: 5px; /* odległości pomiedzy linkami */
background-color: #F0F0F0 } /* tło */
 
p { /* paragraf <p> */
text-align: center; }/* tekst wyśrodkowany */
[HTML] pobierz, plaintext 

A chce zebt mniej wiecej wygladalo to tak:

Menu 1 Menu2 Menu3 Menu4
|
Link
Link

[-hyży-]

http://www.kurshtml.boo.pl/css/poziome_menu,menu.html

[--kierzniak--]

Kombinuje z tym display:inline i nadal to samo wyszko ustawia sie pod spodem. Moglby ktos poprawic kod?