14.01.2013, 17:05
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:
und mein CSS für das Menü:
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;
}