menu a tendina multilivello solo con css

[asevenx]

Come da titolo, vorrei realizzare un menu a tendina multilivello solo con css. Su internet ho trovato questo

<ul id="nav">
	<li>
		<a href="#"><strong>Home Page</strong></a>
	</li>
	<li>
		<a href="#"><strong>Liv1</strong></a>
		<ul>
			<li><a href="#">Sub1</a></li>
			<li><a href="#">Sub2</a></li>
			<li><a href="#">Sub3</a></li>
			<li><a href="#">Sub4</a></li>
		</ul>
	</li>
</ul>

ul#nav, ul#nav li, ul#nav ul{
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.8em
}

ul#nav a{
	display: block;
	padding: 0 1em;
	text-decoration: none;
}

ul#nav li{
	float: left;
	position: relative;
	height: 40px;
	background:#fcfbfb
}

ul#nav li li{
	float: none
} 

ul#nav a:hover{
	
} 

ul#nav ul{
	position: absolute;
	top: 1.7em;
	left: -9999px;
	width: 12em;
    border:3px solid #8bd2e0;
    border-width: 0 0 3px 0;	
}

ul#nav li:hover ul{
	left: auto
}

Vorrei modificarlo in modo tale che passando su sub1 si apra a fianco una nuova lista, come si può fare? grazie a tutti

 

[asevenx]

Sono riuscito a risolvere da me Ho trovato questo (magari se può interessare ad altri)
http://red-team-design.com/css3-dropdown-menu/