Positionieren von Klappnavi

[Freeze]

Hallo!
Hab ein Problem mit meinem Klappnavi. In meiner Vorschau sieht alles super aus, doch wenn ich das Teil dann hochlade, verzweifle ich....sehet selbst trytrytry.funpic.de
in der Vorschau ist das alles so, wie ich es haben möchte...ganz links, direkt unter dem banner (genau in der Ausbuchtung) fängt mein Navi an und sollte genau dort enden wo der banner weiter geht... man sehe selbst...auch die ausfahrbaren teile sind komplett "irgendwo", wo sie nicht hingehören...

hier mal mein html:

  
<div id="navi">  
<div id="menu"><!-- öffnet die Navigationsleiste-->  
  
   <ul><!-- öffnet den ersten Themenblock -->  
  
      <li><a class="direkt" href="home.html">Home</a></li>  
  
   </ul><!--schließt den ersten Themenblock-->  
  
   <ul><!-- öffnet den zweiten Themenblock -->  
  
      <li onmouseover=""><!-- öffnet die Listeneinträge von Thema 2 -->  
  
         <h3>Shop</h3>  
  
            <ul><!-- öffnet die Klappnavi von Thema 2 -->  
  
               <li><a href="team.html">Team</a></li>  
  
               <li><a href="oeffnungszeiten.html">&Ouml;ffnungszeiten</a></li>  
  
               <li><a href="anfahrt.html">Anfahrt</a></li>  
  
            </ul><!-- schließt die Klappnavi von Thema 2 -->  
  
         </li><!-- schließt die Listeneinträge von Thema 2 -->  
  
   </ul><!--schließt den zweiten Themenblock-->  
  
	<ul><!-- öffnet den dritten Themenblock -->  
  
      <li onmouseover=""><!-- öffnet die Listeneinträge von Thema 3 -->  
  
         <h3>Mode</h3>  
  
            <ul><!-- öffnet die Klappnavi von Thema 3 -->  
  
               <li><a href="herbst2013.html">Herbst-Winter 2013</a></li>  
  
            </ul><!-- schließt die Klappnavi von Thema 3 -->  
  
         </li><!-- schließt die Listeneinträge von Thema 3 -->  
  
   </ul><!--schließt den dritten Themenblock-->  
  
	<ul><!-- öffnet den vierten Themenblock -->  
  
      <li onmouseover=""><!-- öffnet die Listeneinträge von Thema 4 -->  
  
         <h3>News</h3>  
  
            <ul><!-- öffnet die Klappnavi von Thema 4 -->  
  
               <li><a href="trends.html">Trends</a></li>  
  
               <li><a href="termine.html">Termine</a></li>  
  
            </ul><!-- schließt die Klappnavi von Thema 4 -->  
  
         </li><!-- schließt die Listeneinträge von Thema 4 -->  
  
   </ul><!--schließt den vierten Themenblock-->  
  
   <ul><!-- öffnet den fuenften Themenblock -->  
  
		<li><a class="direkt" href="newsletter.html">Newsletter</a></li>  
  
   </ul><!--schließt den fuenften Themenblock-->  
  
	<ul><!-- öffnet den sechsten Themenblock -->  
  
      <li><a class="direkt" href="kontakt.html">Kontakt</a></li>  
  
   </ul><!--schließt den sechsten Themenblock-->  
  
  
</div><!-- schließt die Menüleiste #menu -->  
  
<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste-->  
</div>  

und hier das Css-Ding:

  
#navi{  
margin-top:140px;  
}  
/*--Setzt alle Abstände auf "Null" Navi--*/  
* {  
margin: 0;  
padding: 0;  
}  
/*--formatiert die Menüleiste--*/  
#menu {  
width: 100%;  
padding: 0px 0px;  
background: none;  
font-family: Verdana;  
font-size: 0.9em;  
line-height: 1.5;  
float: left;  
z-index:2;  
}  
/*--formatiert die Themenblöcke--*/  
#menu ul {  
float: left;  
width: 115px;  
list-style-type: none;  
}  
/*--definiert die Blocküberschriften--*/  
#menu h3 {  
font-size: 1em;  
text-align: center;  
color: #bfbfbf;  
border: 1px solid #FFFFFF; /*--erforderlich für IE 7--*/  
background: #000000;  
}  
  
/*--definiert die "Drop-Down-Links" im Normalzustand--*/  
#menu a {  
text-decoration: none;  
display: block;  
border: 1px solid #FFFFFF;  
text-align: center;  
background: #000000;  
color: #bfbfbf;  
}  
  
/*--definiert die "Drop-Down-Links" im Hoverzustand--*/  
#menu a:hover {  
color: #000000;  
background: #bfbfbf;  
}  
/*  
*verhindert im Zusammenhang mit position absolute bei ul ul  
*eine Höhenvergrößerung von #menu beim Hovern--  
*/  
  
#menu li {  
position: relative;  
}  
  
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/  
#menu ul ul {  
position: absolute;  
z-index: 2;  
display: none;  
}  
/*--lässt die Dropdown-Links beim Hovern erscheinen--*/  
#menu ul li:hover ul {  
display: block;  
}  
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/  
  
* html #menu ul li {  
float: left;  
width: 100%;  
}  
  
/*--nur für IE 7 erkennbar--*/  
  
*+ html #menu ul li {  
float: left;  
width: 100%;  
}  
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/  
*html body {  
behavior: url(csshover3-source.htc);  
font-size: 100%;  
}  
  
*html #menu ul li a {  
height: 1%;  
}  
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/  
  
#menu a.direkt:link {  
font-size: 1em;  
font-weight: bold;  
text-align: center;  
color: #bfbfbf;  
border: 1px solid #FFFFFF;  
background: #000000;  
}  
  
/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/  
  
#menu a.direkt:hover {  
color: #000000;  
background: #bfbfbf;  
border: 1px solid #FFFFFF;  
}  

Hoffe, ihr könnt mir helfen oder Tipps geben, was ich falsch gemacht habe?!?
Lg