Ich habe heute morgen (da ich nicht schlafen konnte) mal das Menü meiner Clanpage aufgebessert und ein Aufklappmenü mit CSS realisiert.
Zu sehen ist jenes hier: http://team-HysTeriX.com
Im FireFox 2 & 3 funktioniert es einwandfrei.
Jedoch werden die innersten Listen nicht als display:none dargestellt wie es unter CSS definiert ist.
Das es mit dem IE5&6 Probleme gibt ist weitreichend bekannt und wird von mir/uns missachtet. Auf einen 7 Jahre alten Browser optimieren wir nichts (wenn man mal davon absieht das der Rest des Codes eh einige sehr erschrecken wird)...Webspell eben
Leider klappt es nicht einmal im IE7.
Kann mir vielleicht jemand helfen?
Hier nochmal der aussortierte reine Menü Code
HTML:
HTML
<ul id="hnav">
<li><h1 style="background: url(pics/hbutt_main.jpg);">Main</h1>
<ul>
<li><a href="index.php?site=news">News</a></li>
<li><a href="index.php?site=news&action=archive">Archiv</a></li>
<li><a href="index.php?site=articles">Artikel</a></li>
<li><a href="index.php?site=calendar">Kalender</a></li>
<li><a href="index.php?site=faq">F.A.Q.</a></li>
<li><a href="index.php?site=search">Suche</a></li>
</ul>
</li>
<li><h1>Clan</h1>
<ul>
<li><a href="index.php?site=members">Mitglieder</a></li>
<li><a href="index.php?site=clanrules">Regeln</a></li>
<li><a href="index.php?site=joinus">JoinUs</a></li>
<li><a href="index.php?site=clanwars">ClanWars</a></li>
<li><a href="index.php?site=history">Geschichte</a></li>
<li><a href="index.php?site=awards">Gewinne</a></li>
<li><a href="index.php?site=about">Ueber uns</a></li>
</ul>
</li>
<li><h1>Comm.</h1>
<ul>
<li><a href="index.php?site=forum">Forum</a></li>
<li><a href="index.php?site=guestbook">Gästebuch</a></li>
<li><a href="index.php?site=registered_users">User</a></li>
<li><a href="index.php?site=whoisonline">Wer ist onl.</a></li>
<li><a href="index.php?site=polls">Umfragen</a></li>
<li><a href="index.php?site=server">Server</a></li>
</ul>
</li>
<li><h1>Media</h1>
<ul>
<li><a href="index.php?site=files">Files</a></li>
<li><a href="index.php?site=demos">Demos</a></li>
<li><a href="index.php?site=links">Links</a></li>
<li><a href="index.php?site=gallery">Gallery</a></li>
<li><a href="index.php?site=linkus">LinkUs</a></li>
</ul>
</li>
<li><h1>Misc</h1>
<ul>
<li><a href="index.php?site=sponsors">Sponsoren</a></li>
<li><a href="index.php?site=newsletter">Newsletter</a></li>
<li><a href="index.php?site=contact">Kontakt</a></li>
<li><a href="index.php?site=imprint">Impressum</a></li>
</ul>
</li>
<li><h1><a href="index.php?site=forum">Forum</a></h1></li>
<li style="width:69px;"><h1 style="background:url(pics/hbutt_end.jpg);width:69px;"><a href="#"><s>Ranks</s></a></h1></li>
</ul>
Alles anzeigen
CSS:
Code
ul#hnav {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
list-style-type:none;
margin:0;padding:0;
width:579px;
position:absolute;
top:177px;
left:50%;
margin-left:-303px;
}
ul#hnav li {
list-style-type:none;
/* margin-right:5px; */
display:inline;
float: left; width: 85px;
}
ul#hnav li h1 {
width:85px;
height:34px;
line-height:40px;
margin:0;padding:0;
font-size:18px;
background:#555555;
text-align:center;
background:url(pics/hbutt.jpg);
color:#eeeeee;
}
ul#hnav li h1 a, ul#hnav li h1 a:visited, ul#hnav li h1 a:active {
color:#eeeeee;
text-decoration:none;
}
ul#hnav li h1:hover , ul#hnav li h1 a:hover { color:#FEA21B; }
ul#hnav ul, ul#hnav ul li {
margin:0;padding:0;
border:none;
}
ul#hnav ul li a, ul#hnav ul li a:visited{
display:block;
padding:1px;
padding-left:5px;
background:#777777 url(pics/tbhbr.gif);
text-decoration:none;
color:#eeeeee;
border:1px solid black;
font-weight:bold;
font-size:1.2em;
}
ul#hnav ul li a:hover {
background:#999999 url(pics/tbhbl.gif);
color:#FEA21B;
}
ul#hnav li>ul {
display: none;
}
ul#hnav li:hover>ul {
display: block;
}
Alles anzeigen