Min CSS-dropdown blir ingen dropdown

Hej,

Vet nån här möjligen vad som kan vara fel? Jag försöker använda mig av en enkel(?) dropdown-meny för att lära mig hur det fungerar, dvs vad det är som får ul li ul elementen att bara poppa upp vid hover. Här är den:

http://www.gethifi.com/blog/nicer-navigation-with-css-transitions
Testade först att bara kopiera HTML samt CSS-koden rakt av in i JSFiddle för att testa den där men det fungerade inte alls, så jag började istället att titta på sidans egen exempel-meny med Chrome's Element inspector.

Jag har alltså tillämpat på min egen sida endast den förenklade versionen (utan transitions) för att börja "smått". Det som händer är att alla meny-items syns sida vid sida (fortsätter på nästa rad där div:en tar slut. Dessutom har de små "disc"formade punkter bakom varje item.

Jag har suttit i flera timmar nu med webbläsarens (Chrome) Element-inspector och jämfört koden på min och deras meny, men ser alltså inte att det är någon skillnad!
Så varför renderas denna meny helt felfritt på deras sida och ser helknasig ut på min?

Här är min kod:
HTML:
<ul id="trans-nav">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<ul>
<li><a href="#">Sub-item 2.1</a></li>
<li><a href="#">Sub-item 2.2</a></li>
<li><a href="#">Sub-item 2.3</a></li>
</ul>
<li><a href="#">Item 3</a></li>
<ul>
<li><a href="#">Sub-item 3.1</a></li>
<li><a href="#">Sub-item 3.2</a></li>
<li><a href="#">Sub-item 3.3</a></li>
</ul>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>

            \</ul\>

CSS:

#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }

#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; background: #5a8078 url(nav-bg.png) repeat-x 0 0; }

#trans-nav li:hover { background-position: 0 -40px; }

#trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; }

#trans-nav li a:hover { color: #a3f1d7; }

#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0; }

#trans-nav li:hover ul { opacity: 1; }

#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }

#trans-nav li:hover ul li { height: 30px; line-height: 30px; }

#trans-nav li ul li a { background: #63867f; }

#trans-nav li ul li a:hover { background: #5a8078; }

Hoppas att nån kan hjälpa för jag orkar inte börja om från noll igen och leta upp ännu en ny dropdown-list att försöka kopiera från... Många är väldigt stylade och då jag redan har en stil så vill jag bara ha något väldigt enkelt och avskalat som jag kan ta valda delar från.

din HTML markup är felaktig:

<ul id="trans-nav">
	<li><a href="#">Item 1</a></li>
	<li>
		<a href="#">Item 2</a>
		<ul>
			<li><a href="#">Sub-item 2.1</a></li>
			<li><a href="#">Sub-item 2.2</a></li>
			<li><a href="#">Sub-item 2.3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Item 3</a>
		<ul>
			<li><a href="#">Sub-item 3.1</a></li>
			<li><a href="#">Sub-item 3.2</a></li>
			<li><a href="#">Sub-item 3.3</a></li>
		</ul>
	</li>
	<li><a href="#">Item4</a></li>
	<li><a href="#">Item5</a></li>
</ul>

skall det vara (ul är barn till li inte syskon).

Åhh tack!!! Den hade jag aldrig kommit på själv. Du anar inte vilken hjälp du just varit; jag har bränt säkert 20 timmars felsökning på det här... TACK!! :D