Buona domenica a tutti.

Io ho fatto questo menu verticale a tendina:

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu a tendina</title>

<style type="text/css" media="screen">
div#hormenu {
width: 100px;
margin: 0; 
padding: 0;
background: #FFFFCC;
}
div#hormenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
div#hormenu li {
width:100px;
margin: 0;
padding: 0;
color:black;
} 
div#hormenu a {
display: block;
padding: 5px;
color: #000;
text-decoration: none;
}
div#hormenu a:hover {
background-color: #000033;
color: #FFFFFF;
text-decoration: none;
}
div#hormenu li ul {
display: none;
}
div#hormenu li:hover ul {
display: block;
position: absolute;
z-index:1;
width:150px;
padding: 0;
margin: 0 0 0 -1px;
background: #CCFFFF;
}
div#hormenu li li {
border: none; width: 150px;
} 
div#hormenu li li a {
padding: 2px 2px 2px 10px;
}

</style>

</head>

<body>

<div id="hormenu"> 
<ul> [*]Menu 1 
<ul> [*]Submenu 1[*]Submenu 1[*]Submenu 1[*]Submenu 1[*]Submenu 1[/list]
 [/list]

<ul> [*]Menu 2 
<ul> [*]Submenu 2[*]Submenu 2[*]Submenu 2[*]Submenu 2[*]Submenu 2[/list]
 [/list]

</div>


</body>
</html>
Ma come si può vedere il sottomenu esce sotto alla sua voce corrispondente e non riesco a visualizzarlo di fianco, la mia domanda quindi è questa: cosa devo aggiungere per visualizzare il sottomenu di fianco alla sua voce corrispondente? Ho provato con float: ma non mi funziona bene.

Grazie Ciao