Выпадающее меню

[Spidey]

Добрый день! Подскажите пожалуйста как сделать, что бы второе "Page 3" выпадало справа от первого? наперед спс кто поможет)

<style type="text/css">

	.menu {	width:500px;}

	.menu ul {	list-style:none; margin:0px; padding:0px;}
	.menu ul li {	float:left; margin:0 0 0 2px; text-align:center;}
	.menu ul li a {	display:block; width:100px; background:#3366FF;}
	.menu ul li a:hover {	background:#FF0000;}
	.menu ul li ul {	display:none; width:215px;}
	.menu ul li ul li {	float:none; margin:5px 0 0 0;}
	.menu ul li:hover ul {	display:block; position:absolute;}
	.menu ul li ul li .ul {	display:none; float:left;}
	.menu ul li ul li .ul2 {	display:none; float:none; position:relative;}
	.menu ul li:hover ul li:hover ul {	float:none; display:block; position:absolute;}

</style>

<div class="menu">
	<ul>

		<li><a href="#">Page 1</a>

				<ul>
					<li><a href="#">Site 1</a></li>
					<li><a href="#">Site 2</a></li>
						<li><a href="#">Page 3</a>

							<ul class="ul2">
								<li><a href="#">Site A</a></li>
								<li><a href="#">Site B</a></li>
								<li><a href="#">Site C</a></li>
								<li><a href="#">Site D</a></li>
								<li><a href="#">Site E</a></li>
								<li><a href="#">Site F</a></li>
							</ul>

						</li>
					<li><a href="#">Site 4</a></li>
					<li><a href="#">Site 5</a></li>
					<li><a href="#">Site 6</a></li>
				</ul>


		</li>		

	</ul>

</div>

[psywalker]

первому UL надо релатив поставить