Hi
ich habe mit meinen beschiedenen CSS-Kenntnissen versucht ein Drop-Down Menü zu basteln. Dafür habe ich einfach mal den CSS-Code meines Wordpress-Themes mit dem eines Dropdownmenüs verwurschtelt und dabei ist etwas schief gegangen.
Die Fraben, usw. anzupassen war kein Problem aber die Dropdowns stehen so weit unter dem Menü, dass man sie gar nicht anklicken kann.
Das ganze habe ich unter
http://www.lerk.de/css/index.html online gestellt.
HTML-Code
Code:
<div id="mainMenueArea">
<ul id="mainMenueList">
<li id="mainMenue_1"><a href="http://www.lerk.de/">Home</a></li>
<li id="mainMenue_1"><a href="http://www.lerk.de/forum/">Community</a>
<ul class="subMenueItems">
<li><a href="http://www.lerk.de/forum/">Forum</a></li>
<li><a href="http://www.lerk.de/server/teamspeak/">TeamSpeak</a></li>
</ul>
</li>
<li id="mainMenue_1"><a href="http://www.lerk.de/ns2/">Natural Selection 2</a>
<ul class="subMenueItems">
<li><a href="http://www.lerk.de/ns2/">Natural Selection 2</a></li>
<li><a href="http://www.lerk.de/ns2/faq/">FAQ</a></li>
<li><a href="http://www.lerk.de/ns2/faq/pre-order/">Pre-Order FAQ</a></li>
</ul>
</li>
<li id="mainMenue_1"><a href="http://www.lerk.de/tools/">Tools</a>
<ul class="subMenueItems">
<li><a href="http://www.lerk.de/natural_selection_search_engine.htm">Natural Selection Suchmaschine</a></li>
<li><a href="http://www.lerk.de/2008/08/ventrilo-mix-v122-mit-mumble-support/">Ventrilo Mix</a></li>
<li><a href="http://playerdb.lerk.de/">PlayerDB</a></li>
</ul>
</li>
<li id="mainMenue_1"><a href="http://www.lerk.de/media/">Media</a>
<ul class="subMenueItems">
<li><a href="http://www.lerk.de/media/poster/">Poster</a></li>
<li><a href="http://www.lerk.de/media/signatur-bilder/">Signaturbilder</a></li>
</ul>
</li>
<li id="mainMenue_1"><a href="http://www.lerk.de/ns1/">Natural Selection 1</a>
<ul class="subMenueItems">
<li><a href="http://www.lerk.de/ns1/impulse-liste/">Impulse Liste</a></li>
<li><a href="http://www.lerk.de/damage-calculator.htm">Damage Calculator</a></li>
<li><a href="http://www.lerk.de/comm/">Commander Guide</a></li>
</ul>
</li>
</ul>
</div>
CSS-Code
Code:
#subMenue a {
padding: 5px;
font-weight: bold;
color: #060;
display: block;
text-decoration: none;
border-bottom: 1px solid #C4DFB5;
margin-left: 10px;
margin-right: 10px;
}
#subMenue a:hover {
color: #060;
background-color: #F5FFEF;
padding-left: 14px;
}
#subMenue p {
margin:0px;
padding:0px;
}
#topMenue {
float: right;
margin-top: 51px;
color: #A2A2A2;
margin-right: -5px;
}
/* common styling */
#mainMenueArea ul li {position:relative;}
#mainMenueArea ul li ul {display: none; background-color:#D3D3D3; padding: 0; width: 149px;}
/* specific to non IE browsers */
#mainMenueArea ul li:hover ul {display:block; position:absolute; top:45px; left:0; background-color:#D3D3D3; border: none;}
/*alle*/
ul#mainMenueList li#mainMenue_1 ul
{
background-color: #4E871C;
}
ul#mainMenueList li ul {
margin: 0px;
padding: 0px;
}
ul#mainMenueList li ul li {
height: 22px;
line-height: 22px;
float:none;
padding: 0px;
border-top: 1px solid #FFFFFF;
}
ul#mainMenueList li#mainMenue_1 ul a
{
font-size:11px;
text-align:left;
margin:0px;
padding:0px;
height: 22px;
line-height: 22px;
color:#333333;
font-weight:normal;
padding-left:4px;
}
ul#mainMenueList li#mainMenue_1 ul a:hover,
{
color:#000000;
background-image: url();
padding-left:8px;
}
#mainMenueList {
height : 32.5px;
background-color : #4E871C;
padding-top : 7.5px;
padding-left : 10px;
}
#mainMenueList li {
list-style-type : none;
background-position : 0 100%;
height : 25px;
line-height : 25px;
float : left;
margin-right : 7px;
font-weight : bold;
background-repeat : no-repeat;
background-color : #92C135;
}
#mainMenueList .current_page_item {
background-position : 0 0;
background-repeat : no-repeat;
}
#mainMenueList li a {
color : white;
text-decoration : none;
background-position : 100% 0;
background-repeat : no-repeat;
display : block;
padding-left : 10px;
padding-right : 10px;
}
#mainMenueList .current_page_item a {
background-position : 100% 0;
background-repeat : no-repeat;
color : black;
}
#mainMenueList a:hover, #mainMenueList a:active, #mainMenueList a:focus {
color : black;
}
#mainMenueList .current_page_item a:focus, #mainMenueList .current_page_item a:active {
text-decoration : underline;
}