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?

Hmm...

Det finns en uppdaterad artikel - "Son of suckerfish dropdowns" på http://www.htmldog.com/articles/suckerfish/dropdowns/ som visar hur man kan få till den typen av hierarkiska menyer utifrån samma princip som i den ALA-artikel jag tror du menar ;)

Ahh, tackar. Såg det jag ville få ut men har inte provat det än.

Nu har jag kollat mer på sidan och det exakt det jag ville ha, fick även menyn både vertikal o horisontal.

Tackar ännu en gång.

Har fått ett problem med denna meny i IE...

http://www.jerpadesign.com/up/pung/1/
I FF funkar den som den ska, ja den ser B:ig ut bara så här men på sidan är den OK, inget hopp upp o ner i de olika menyerna heller.

Men i IE funkar det inte alls, varken överföring av mus eller klick. Menyn ör den som Jarvklo länkade.

Hmm...

Du var nog antagligen bara lite trött när du lade in t.ex.

@import "meny.js";

i din stilmall för att läsa in de externa Javascriptsnuttar som måste till för att få det att funka i MSIE istället för att köra med

<script type="text/javascript" src="meny.js" ></script>

:bire

Hmm, förra gången jag höll på med lager, nån gång i nyår så sa du åxå att jag var trött.... what ever.

Ändrade till ovanstående tips men icke. Det kan ju iaf varit det felet, dock hade jag glömt javascriptfilen för menyn...
Den JS-fil jag länkat till var bara för include....

Men nu funkar det iaf.

Tack ännu en gång.
Det är tack vare bl.a. dig Jarvklo som man orkar sitta och göra detta.