CSS dropdown-menü

[Grasdackel96]

Hallo liebes Forum,

ich sitze schon seit mehr als einer Stunde vor meinem Bildschirm und weiß nicht mehr weiter. Mein Ziel ist es, in CSS3 ein dropdown-menü zu erstellen. Das Menü ist auch schon fast fertig, allerdings ergibt sich folgendes Problem:

(Links sind zur beseren Sichtbarkeit grün eingefärbt.)

CSS:

ul
{
    margin: 0px;
    padding: 0px;
}

ul#navigation ul, ul#navigation ul li ul
{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 99999;
    background-color: #404040;
    width: 200px;
    list-style: none outside none;
   
    -webkit-transition: opacity 0.5s linear, visibility 0.5s linear;
    -moz-transition: opacity 0.5s linear, visibility 0.5s linear;
    -o-transition: opacity 0.5s linear, visibility 0.5s linear;
    transition: opacity 0.5s linear, visibility 0.5s linear;
}

.dropdown
{
    background-color: #404040;
    list-style-type: none;
    margin-left: -10px;
    margin-top: 10px;
    width: 200px;
}

HTML:

<nav id="menu">
                <ul id="navigation">
                    <li class="menuitem firstitem" id="activeitem"><a href="#">Startseite</a></li>
                    <li class="menuitem"><a href="#">Über mich</a></li>
                    <li class="menuitem"><a href="#">Geschichten</a></li>
                    <li class="menuitem">
                        <a href="#">Links</a>
                       
                        <ul class="dropdown">
                            <li><a href="#" class="borderbottom">zu anderen Autoren</a></li>
                            <li>
                                <a href="#" class="borderbottom">zu Verlagen</a>
                                <ul>
                                    <li><a href="#" class="borderbottom">1. Verlag</a></li>
                                    <li><a href="#">2. Verlag</a></li>
                                </ul>
                            </li>
                            <li><a href="#" class="borderbottom">Testlink 1</a></li>
                            <li><a href="#" class="borderbottom">Testlink 2</a></li>
                            <li><a href="#" class="borderbottom">Testlink 3</a></li>
                            <li><a href="#">Testlink 4</a></li>
                        </ul>
                    </li>
                    <li class="menuitem"><a href="#">Gästebuch</a></li>
                </ul>
            </nav>

 

[threadi]

Anhand des gezeigten CSS-Codes kann ich das nicht nachvollziehen. Kann man sich das auch irgendwo direkt anschauen?

 

[Grasdackel96]

http://grasdackel96.gr.funpic.de/

Das dropdown-menü hat immer die selbe Höhe. Ich kann leider nicht erkennen, warum genau diese Höhe.

 

[threadi]

Wegen .menuitem:hover ul, wo du die Höhe auf 200px beschränkst.

 

[Grasdackel96]

Wenn man den Wald vor lauter Bäumen nichtmehr sieht ...

Vielen Dank für deine Hilfe!