[Meister Lampe]

Hallo,

ich habe mir gerade für das Community-Forum "meiner" Community ein Dropdown-Menü gebaut.

Das Menü als solches funktioniert super, leider wird der ausgeklappte Teil des Menüs vom Logo und dem Panel verdeckt.

Ich hab nun die CSS geprüft und nach eventuell vorhandenen z-index Angaben gesucht un bin nicht fündig geworden. Zusätzlich habe ich dem betreffenden Teil meines Menüs einen z-index von 1.000 gegeben.

Egal ob ich nun das Menü im #container oder davor positioniere, mein Problem wird nicht behoben. Ich zweifle hier an meinem Verständnis von HTML und CSS, da ich kein Flash benutze was sich in den Vordergrund drängen könnte.

Vielleicht übersehe ich es nur, eventuell gibt es aber "versteckte" Eigenschaften oder Mechanismen vom Board her die das verusachen. Da ich aber mit der Engine des Boards noch nicht per Du bin möchte ich um Hilfe bitten.
Daher meine Frage:

Woran könnte es liegen, dass mein Dropdown verdeckt wird?

Ich habe folgenden Code:
header template:

PHP-Code:

<div id="container">

<div id="menu">
    <ul class="left">
        <li class="pfirst"><a href="#"><span>Home</span></a></li>
        <li><a href="{$mybb->settings['bburl']}/memberlist.php"><span>{$lang->toplinks_memberlist}</span></a></li>
        <li><a href="#"><span>Messages</span></a></li>
        <li><a href="#"><span>User CP</span></a></li>
        <li class="plast"><a href="#"><span>More</span></a>
            <ul>
                <li><a href="http://www.facebook.com/pages/WCFAN/265623727256"><span>Facebook</span></a></li>
                <li><a href="http://hlstats.wcfan.de/hlstats.php"><span>HLstatsX</span></a></li>
                <li><a href="http://bans.wcfan.de/"><span>sourcebans</span></a></li>
                <li><a href="http://download.wcfan.de/"><span>download</span></a></li>
                <li class="last"><a href="http://steamcommunity.com/groups/wcfan"><span>steamgroup</span></a></li>
            </ul>
        </li>
    </ul>
    <ul class="right">
        <li class="pfirst"><a href="{$mybb->settings['bburl']}/search.php"><span>{$lang->toplinks_search}</span></a></li>
        <li><a href="{$mybb->settings['bburl']}/calendar.php"><span>{$lang->toplinks_calendar}</span></a></li>
        <li class="plast"><a href="{$mybb->settings['bburl']}/misc.php?action=help"><span>{$lang->toplinks_help}</span></a></li>
    </ul>
</div>


<a name="top" id="top"></a>
<div id="header">
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
<hr class="hidden" />
<div id="panel">
{$welcomeblock}
</div> 


und mein CSS für das Menü:

Code:

#menu { /* container des menu */
    width: 100%;
    height: 30px;
    margin-bottom: 1em; /* oben und unten 25px links + rechts auto*/
    border-radius: 0 0 5px 5px;
    border: 1px solid #333;
    background-image: url(images/menu/menu_bg.png);
    background-position: right;
    background-repeat: repeat-x;
    box-shadow: 0 3px 3px #75A4C6;
    color: #cccccc;
}

#menu a:hover {
    text-decoration: none;
}

#menu ul {
    text-transform: uppercase;
}

#menu ul.left { /* linker teil des menu */
    list-style-image: none;
    list-style-type: none;
    float: left;
}

#menu ul.right { /* rechter teil des menu */
    list-style-image: none;
    list-style-type: none;
    float: right;
}

#menu ul.right li { /* teilstrich auf der rechten seite einfuegen */
    background-image: url(images/menu/spacer_klein.png);
    background-position: left;
    background-repeat: repeat-y;
}

#menu ul li { /* beschriftung der haupteinträge */
    float: left;
    width: 100px;
    height: 30px;
    text-align: center;
    background-image: url(images/menu/spacer_klein.png);
    background-position: right;
    background-repeat: repeat-y;
}

#menu ul li:hover { /* mouseover effekt */
    background-image: url(images/menu/menu_bg_hover.png);
    background-repeat: repeat-x;
    background-position: left;
}

#menu ul li span { /* Zur Positionierung der Beschriftungen in dem menu (abstand nach oben) */
    vertical-align: middle;
    padding-top: 5px;
}

/* zweite ebene des Menu */
#menu ul li ul {
   padding-top:7px;
    list-style-image: none;
    list-style-type: none;
    position: absolut;
    z-index: 1000;
    display: none; /* 2. eben ausblenden */
}
#menu ul li:hover ul { /* 2. ebene on mouseover einblenden */
    display: block;
}
#menu ul li ul li { /* eintraege der 2. ebene anpassen */
    width: 98px;
    border: 1px solid #666666;
    background-color: #333333;
    border-bottom: none;
    background-image: none;
}
#menu ul li ul li:hover {
    background-image: none;
    background-color: #555555;
}

#menu ul li ul li.last { /* unterste grenze anfuegen */
    border-radius: 0 0 5px 5px;
    border-bottom: 1px solid #666;
}

[MrBrechreiz]

Link zum Forum ?

[Meister Lampe]

Link ist: http://foren.wcfan.de/serverforum/
Allerdings siehst du da das Theme nicht, da es von Berechtigung geschützt wird. Bin grad unterwegs und hab mal versucht nen Screenshot hochzuladen. Kann's daheim gern nochmal verbessern.

[Meister Lampe]

Habe mein Problem gefunden.
Ein klein wenig Abstand hilft manchmal.

Das Problem war, dass ich vergessen habe dem ersten <ul> ein position: relatvive; und dem zweiten <ul> ein position: absolute; zu geben.

Damit ist das hier :solved:

[MrBrechreiz]

Schön das Du selbst den Fehler gefunden hast.

Du kannst das Menü nach

Code:

<div id="container">
        <a name="top" id="top"></a>

einbauen, oder auch ausserhalb des containers, wie Du möchtest.