meny i flera steg

Har varit inne på Alistapart och hittat en bra meny för mitt ändåmål.

Nu är det så att jag skulle vilja ha ytterligare en nivå.
Har fått till en extra men den kommer vid den först hovern.

Menyn

<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Services</a> 
    <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li> 
    </ul> 
  </li> 

</ul>

CSS

body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */

Genom att trixa o försökt har ajg fått ut menyn ytterligare ett steg genom denna kod. Men som sagt som kommer siffrorna samtidigt som jag går över "Contact Us"

  <li><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li>
      <li><a href="#">Australia</a>
	<ul>
	      <li><a href="#">1</a></li> 
	      <li><a href="#">2</a></li> 
	      <li><a href="#">3</a></li> 
	      <li><a href="#">4</a></li> 
	      <li><a href="#">5</a></li> 
	      <li><a href="#">6</a></li> 
	</ul></li>
    </ul> 
  </li>

Hur löser jag detta?