Navigation und Subnavigation

[roseviolette]

url ist www.alohadesign.ch

Hallo zusammen

Ich habe eine Homepage mit spezieller Navigation:

<div id="nav">

<h2 class="accessibility">Navigation</h2>

<ul>
         <li class="home"><a class="activehome" href="index.html" accesskey="1"><dfn class="accessibility">1:Home </dfn></a></li>

<li class="about"><a href="about.html" accesskey="2"><dfn class="accessibility">2:About </dfn></a>
             <ul>
                  <li><a href="news.html">News</a></li>
                </ul>
            </li>
            <li class="web"><a href="web.html" accesskey="3"><dfn class="accessibility">3:Web </dfn></a>
             <ul>
                <li><a href="weboffer.html">Offer</a></li>
                    <li><a href="webclients.html">Clients</a></li>
                </ul>
</li>
            <li class="more"><a href="more.html" accesskey="4"><dfn class="accessibility">4:More </dfn></a>
             <ul>
                <li><a href="moreoffer.html">Offer</a></li>
                    <li><a href="moreclients.html">Clients</a></li>
                </ul>
            </li>
            <li class="contact"><a href="contact.html" accesskey="5"><dfn class="accessibility">5:Contact</dfn> </a></li>

</ul>
    
</div><!--end nav--

>   
>   
> entsprechendes css:  
>   
> ~~~css

#nav{  

> 	margin-left:300px;  
> 	position:absolute;  
> 	z-index:500;  
> 	}  
> 	  
> #nav ul li{  
> 	display:block;  
> 	height:78px;  
> 	width:78px;  
> 	float:left;  
> 	}  
> 	  
> #nav ul li a {  
> 	display:block;  
> 	height:78px;  
> 	position:relative;  
> 	width:78px;  
> 	z-index:11000;  
> 	margin-left:-2px;  
> 	}  
> 	  
> 	/*Home*/  
> #nav ul li.home{  
> 	background-image:url(../images/Buttons/button_home_normal.png);  
> 	margin-left:-60px;  
> 	margin-top:303px;  
> 	}  
> 	  
> #nav ul li.home a:hover{  
> 	background-image:url(../images/Buttons/button_home_rollover.png);  
> 	}  
> 	  
> #nav ul li.home a.activehome{  
> 	background-image:url(../images/Buttons/button_home_active.png);  
> 	}  
>   
> /*About*/  
>   
> #nav ul li.about{  
> 	background-image:url(../images/Buttons/button_about_normal.png);  
> 	margin-left:46px;  
> 	margin-top:213px;  
> 	}  
> 	  
> #nav ul li.about a:hover{  
> 	background-image:url(../images/Buttons/button_about_rollover.png);  
> 	margin-right:-100px;  
> 	}  
> 	  
> #nav ul li.about a.activeabout{  
> 	background-image:url(../images/Buttons/button_about_active.png);  
> 	}  
> 	  
> 	  
> 	  
> /*Web*/  
>   
> #nav ul li.web{  
> 	background-image:url(../images/Buttons/button_web_normal.png);  
> 	margin-left:46px;  
> 	margin-top:143px;  
> 	}  
> 	  
> #nav ul li.web a:hover{  
> 	background-image:url(../images/Buttons/button_web_rollover.png);  
> 	}  
> 	  
> #nav ul li.web a.activeweb{  
> 	background-image:url(../images/Buttons/button_web_active.png);  
> 	}  
>   
>   
> /*More*/  
>   
> #nav ul li.more{  
> 	background-image:url(../images/Buttons/button_more_normal.png);  
> 	margin-left:46px;  
> 	margin-top:87px;  
> 	}  
> 	  
> #nav ul li.more a:hover{  
> 	background-image:url(../images/Buttons/button_more_rollover.png);  
> 	}  
> 	  
> #nav ul li.more a.activemore{  
> 	background-image:url(../images/Buttons/button_more_active.png);  
> 	}  
>   
>   
> /*Contact*/  
>   
> #nav ul li.contact{  
> 	background-image:url(../images/Buttons/button_contact_normal.png);  
> 	margin-left:46px;  
> 	margin-top:48px;  
> 	}  
> 	  
> #nav ul li.contact:hover{  
> 	background-image:url(../images/Buttons/button_contact_rollover.png);  
> 	}  
> 	  
> #nav ul li.contact a.activecontact{  
> 	background-image:url(../images/Buttons/button_contact_active.png);  
> 	float:none;  
> 	}  
> 	  
> /* subnavi */  
>   
> /* unterliste links verstecken, bei mouseover unterliste einblenden */	  
> #nav ul ul {  
> 	display:block;  
> 	height:100px;  
> 	margin-left:40px;  
> 	margin-top:-30px;  
> 	position:absolute;  
> 	width:100px;  
> 	/*runde ecken*/  
> 	-moz-border-radius:20px;  
> 	-webkit-border-radius:20px;  
> 	/*schatten*/  
> 	-moz-box-shadow:3px 3px 5px #000;  
> 	-webkit-box-shadow:3px 3px 5px #000;  
> 	box-shadow:3px 3px 5px #000;  
> 	}	  
> 	  
> #nav ul ul{  
> 	left:-2000px;  
> 	z-index:10000;  
> 	background-color:#f39b61;  
> 	}  
>   
> #nav ul li:hover ul{  
> 	left:0px;  
> 	position:relative;  
> 	}	  
> 	  
> 	  
> #nav ul ul li, #nav ul ul li a {  
> 	display:inline;  
> 	width:78px;  
> 	height:20px;  
> 	text-decoration:none;  
> 	color:#000;  
> 	font-family:Arial, Helvetica, sans-serif;  
> 	}	  
>   
> #nav ul ul li a.activenews {  
> 	text-decoration:underline;  
> 	color:#c61197;  
> 	}  
> 	  
> #nav ul ul li a.activemoreoffer {  
> 	text-decoration:underline;  
> 	color:#c61197;  
> 	}  
> 	  
> #nav ul ul li a.activemoreclients {  
> 	text-decoration:underline;  
> 	color:#c61197;  
> 	}  
> 	  
> #nav ul ul li a.activeweboffer {  
> 	text-decoration:underline;  
> 	color:#c61197;  
> 	}  
> 	  
> #nav ul ul li a.activewebclients {  
> 	text-decoration:underline;  
> 	color:#c61197;  
> 	}  
>   
> #nav ul ul li {  
> 	margin-left:20px;  
> 	margin-top:10px;  
> 	padding:0px 10px;  
> 	}  
> 	  
> #nav ul ul li a:hover{  
> 	background-image:none !important;  
> 	background-color:#f6cb62;  
> 	}	  
> 

jetzt ist es so, dass in safari und firefox funktioniert alles top aber im ie (auch version 8) verschiebt es mir den ganzen inhalt so dermassen nach unten sollte aber direkt unterhalb der navigation erfolgen.

weiss jemand, wie ich das beheben kann?

dankeschön