Sous menu à présentation horizontale

Bonjour,

Je n'arrive pas à présenter mon sous menu de manière uniquement horizontale.
Le "menu" est constitué d'une image 'carré gris' p0. Le sous menu contient 'carré vert' p1, 'carré orange' p2 et 'carré rouge' p3 . Au passage de souris, le sous menu se déploie sur la droite de l'image mais verticalement. J'ai bien essayé avec display:inline mais je doit me tromper dans son utilisation...

Voici le code html (simplifié car le fichier est en php):

<link rel="stylesheet" href="test.css" type="text/css" media="screen" />
<div id="menu">
<form method='POST' action='send.php'>
<ul class="niveau1">
    <img src="data/p0.png"/>
    <ul class="niveau2">
      <li><input type="image" src="data/p1.png"></li>
      <li><input type="image" src="data/p2.png"></li>
	  <li><input type="image" src="data/p3.png"></li>
    </ul>
Blabla 1 test de texte
</ul>
<ul class="niveau1">
    <img src="data/p0.png"/>
    <ul class="niveau2">
      <li><input type="image" src="data/p1.png"></li>
      <li><input type="image" src="data/p2.png"></li>
	  <li><input type="image" src="data/p3.png"></li>
    </ul>
Blabla 2 test de texte
</ul>
</form>
</div>

Et pour le css:

div#menu {
	width: 650px;
	height: 430px;
	border: 1px solid #333333;
	padding: 0px 0px 0px 5px;
	overflow: auto;
}
div#menu ul ul {
	display: none;
	position: relative;
	left: 12px;
	top: 0px;
	margin: 0px;
	padding: 0px 2px;
}
div#menu li {
	list-style-type: none;
	position: relative;
	width: 12px;
}
div#menu ul:hover ul.niveau2 {
	display:inline;
}

Je ne suis pas sur de bien m'y prendre. Je cherche à présenter une extraction SQL de choses à faire et le menu doit permettre de choisir la priorité. Tout fonctionne sauf la présentation du menu où je souhaiterai que les carrés de couleur se placent sur le texte et non en vertical, décalant qui plus est les lignes du dessous.
Une idée?

bonjour,

essaie de rajouter ça :

div#menu ul ul li{ 
    display:inline; 
}