Darstellungsproblem in Firefox und IE

[Klaus Meseck]

Hi,

ich habe ein Problem mit einem Menü, das ich erstellt habe. In Chrome und Opera funktioniert es, wie es soll. Im Internet Explorer und in Firefox erscheinen die Submenüs immer in der linken oberen Ecke und ich weiß beim besten Willen nicht wieso, vielleicht hat jemand damit schon ähnliche Erfahrungen gemacht? Wäre für jede Hilfe dankbar!

Code sieht folgendermaßen aus:

<div class="menu">

<ul>

<li class="topmenu"><a href="#">bb PORSCHE</a>
                <ul>
                  <li class="submenu"><a href="#"><span class="bla">TURBO TARGA RAINBOW</span></a></li>
                  <li class="submenu"><a href="#"><span class="bla">TURBO TARGA WEISS</span></a></li>
                  <li class="submenu"><a href="#">TURBO TARGA SCHWARZ</a></li>
                  <li class="submenu"><a href="#">P828 TARGA</a></li>
                  <li class="submenu"><a href="#">928 CABRIO</a></li>
                </ul>
              </li>

<li class="topmenu"><a href="#">bb MERCEDES</a>
                <ul>
                  <li class="submenu"><a href="#">Punkt1</a></li>
                  <li class="submenu"><a href="#">Punkt2</a></li>
                  <li class="submenu"><a href="#">Punkt3</a></li>
                  <li class="submenu"><a href="#">Punkt4</a></li>
                  <li class="submenu"><a href="#">Punkt5</a></li>
                </ul>
              </li>

<li class="topmenu"><a href="#">bb GOLF</a>
                <ul>
                  <li class="submenu"><a href="#">GOLF</a></li>
                  <li class="submenu"><a href="#">GOLF CABRIO</a></li>
                </ul>
              </li>

</ul>
       </div>

>   
>   
> ~~~css
  

>   
> .menu {  
> 	text-align: center;  
> 	height: 100%;  
> }  
>   
>   
> .menu a {  
> 	text-decoration: none;  
> 	font-weight: bold;  
> 	font-size: 90%;  
>     color: #3A3A39;  
> 	letter-spacing: 2px;  
> }  
>   
>   
> .menu ul {  
> 	margin: 0px;  
> 	padding: 5px;  
> }  
>   
>   
> .menu ul li {  
> 	display: inline;  
> 	position: relative;  
> }  
>   
>   
> .menu ul li:hover > ul {  
> 	display: block;  
> 	position: absolute;  
> 	padding-top: 10px;  
> }  
>   
>   
> .menu ul ul {  
> 	display: none;  
> }  
>   
>   
> .menu ul ul a {  
> 	padding: 7px 10px;  
> 	display: block;  
> 	border-top: 1px solid transparent;  
> 	border-bottom: 1px solid transparent;  
> }  
>   
>   
> .menu ul ul a:hover {  
> 	color: #FFFFFF;  
> 	display: block;  
> 	background-color: #5D5D5D;  
> 	border-top: 1px solid #000000;  
> 	border-bottom: 1px solid #000000;  
> }  
>   
>   
> .menu ul ul li {  
> 	display: block;  
> }  
>   
>   
> .submenu {  
> 	background-color: #777777;  
> 	width: 200%;  
> 	font-size: 70%;  
> 	text-align: left;  
> 	margin-left: -50%;  
> 	opacity: 0.85;	  
> }  
>   
>   
> 

Des Fehler dürfte in der Verschachtelung der CSS-Eigenschaft 'position:absolute' liegen. Die Position 'topmenu' ist nicht definiert.