waagerechtes Menü

Hallo leute,

mein aktuelles problem ist sicher für euch ein alter hut...
ich möchte ein menü bauen, welches aus zwei untereinanderstehenden kategorien besteht. Wenn man sich dann in einer befindet, sollen alle Unterpunkte waagerecht laufen. an sich recht simpel - und so solls aussehen.
http://www.dieses.net/temp/menue.gif

Bei mir steht leider alles hintereinander :-(

Markup:

<div id="navigation_g">
		<ul id="nav_grafik">
				<li>grafik</li>
				<li>freie Sachen</li>
				<li>angewandt</li>
			</ul>
		</div>
		<div id="navigation_f">
			<ul id="nav_foto">
				<li>foto</li>
				<li>prignitz</li>
				<li>portrait</li>		
				<li>fhtw</li>
			</ul>
		
		</div>

CSS:

#navigation_g
		{margin-top: 30px;
		margin-left: 145px;
		text-align: left;
		}
		
#navigation_f
		{margin-top: 0;
		margin-left: 145px;
		text-align: left;
		}
		
ul#nav_grafik, ul#nav_foto 
		{list-style-type: none;
		line-height: 15px;
		letter-spacing: 0.2em;
		}
		
ul#nav_grafik li, ul#nav_foto li 
		{padding: 0.4em;
		float: left;
		}

Vielen Dank für den schnellen Rat.

ul#nav_grafik, ul#nav_foto 
		{list-style-type: none;
		line-height: 15px;
		letter-spacing: 0.2em;
		clear: left;
		}

wie du siehst, hab ich das "clear:left hier reingetan. Erschließt sich mir zwar nicht ganz, aber funktioniert! :-)