[ERLEDIGT] Fehlerhafte Darstellung des Submenü in FF und IE

[Winch]

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!

Der Code sieht so aus:

<div class="menu">

            <ul>

              <li class="topmenu"><a href="#">bb PORSCHE</a>
                <ul>
                  <li class="submenu"><a href="#">TURBO TARGA RAINBOW</a></li>
                  <li class="submenu"><a href="#">TURBO TARGA WEISS</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>

.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;      
}

 

[threadi]

Es könnte daran liegen, dass Du das ausklappende Menü zwar absolut positionierst, aber nicht sagst wohin (CSS-Eigenschaften top, left, right oder bottom).

 

[Winch]

Genau daran hat es gelegen! So schnell und einfach kann Hilfe gehen, vielen Dank !!!