Drop Down Menü nicht sichtbar unter Android

[Mimir]

Leider konnte ich über die Suchfunktion bzw. Google nichts passendes Finden, soadass ich eine Frage an euch habe.

Ich habe derzeit meine erste Website Programmiert/Design(t) und an das Ilch CMS angepasst. Dabei habe ich am oberen Linken Rand ein Drop Down Menü. Leider Funktioniert dieses nicht unter android, ich vermute das es ebenfalls nicht unter das Iphone OS funktioniert. Ich würde mich freuen wenn ihr mir bei diesen Problem helfen könntet. Ich habe es alles bisher auf einer Test seite hochgeladen. Leider habe ich absolut keine Ahnung, woran es liegen könnte.

Betreffende Website: Das Clanscript für jeden! :: News

QuellCode der betreffenden Problems HTML

<div id="menu"><!-- öffnet die Navigationsleiste-->

       {_list_menunr1@<ul><!-- öffnet den ersten Themenblock -->

        <li><!-- öffnet die Listeneinträge von Thema 1 -->

           <span class="btitle"><p>%1</p></span><div id="pfeile"></div>

              %2

              </ul> <!-- schließt die Klappnavi von Thema 1 -->

          </li><!-- schließt die Listeneinträge von Thema 1 -->

     </ul>}<!--schließt den ersten Themenblock-->

   </div><!-- schließt die Menüleiste #menu -->

CSS

div#pfeile {
background: url(bilder/pfeile.png);
width: 20px;
height: 50px;
padding: 0 5px 0 0;
float: left;
cursor: hand;
cursor: pointer;
}

/*--formatiert die Menüleiste--*/
#menu {
padding: 0 5px;
width: 100%;
font-family: Cambria;
margin-bottom: 25px;
font-size: 20px;
line-height: 50px;
float: left;
}


/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
list-style-type: none;
}

#menu p {
font-size: 20px;
color: #ffffff;
float: left;
height: 50px;
/*border: 1px solid #000000;--erforderlich für IE 7--*/
}
#menu p:hover {
color: #af0000;
cursor: hand;
cursor: pointer;
}


/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
width: 160px;
height: 40px;
display: block;
border-bottom: 2px solid #9e9e9e;
padding: 0 0 0 5px;
font-size: 17px;
font-family: Cambria;
text-align: left;
background: #3b3b3b;
color: #ffffff;
float: left;
}

/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
color: #af0000;
background: #272727;
border-bottom: 2px solid #af0000;
}

/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/

#menu li {
position: relative;
}

/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}

/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
margin: 50px 0 0 0;
}

Mir ist klar, das mit jquery gearbeitet werden muss, damit das Menü unter mobilen Anwendungen auch funktioniert. Jedoch wird nicht mal in normalen Zustand (also ohne hovern) etwas angezeigt.

Ich danke für eure Hilfe :-)

 

[threadi]

Dein HTML-Code ist fehlerhaft:
[Invalid] Markup Validation of http://wolfbernau.wo.funpic.de/ilch/ - W3C Markup Validator

U.a. ist auch das Klappmenü fehlerhaft. Du schließt ein <ul> zuviel. Korriere mal diese Fehler, dann kannst Du nochmal prüfen ob es dann geht.

 

[Mimir]

Danke erstmal für den Validator. Nachdem ich den <ul> tag weggenommen hatte, klappte es immer noch nicht. Aber ich fand den Fehler in der CSS, dort musste ich noch position: relative angeben, seit dem klappt es wunderbar :-)

Danke für die schnelle Hilfe