Hallo Leute,
ich bin neu hier, und Anfänger also habt etwas Nachsicht...
Ich habe auf meiner Seite, an der ich gerade arbeite ein Menü erstellt. Die Hauptmenüpunkte werden mir korrekt angezeigt, die Untermenüpunkt jedoch leider nicht. Der Hover-Effekt funktioniert noch, aber die Unterpunkte öffnen sich gar nicht erst.
Im CSS selbst und im HTML Code habe ich keinen Fehler finden können. Vielleicht findet Ihr ja des Rätsels Lösung?
Ich habe Euch die Dateien/Seite auf
...::: Freiwillige Feuerwehr Rothenburgsort/Veddel :::... hochgeladen!
Vielen Dank im Voraus für Eure Hilfe.
EDIT:
Hier noch den HTML-Code:
HTML-Code:
<link href="style.css" rel="stylesheet" type="text/css">
<title>...::: Freiwillige Feuerwehr Rothenburgsort/Veddel :::...</title>
<style type="text/css">
<!--
.Stil3 {font-size: 9px}
body,td,th {
color: #D4D4D4;
}
-->
</style>
<span class="Stil3"> </span><br>
<table width="869" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" valign="top"><div align="left"><img src="content/startseite/header.png" width="920" height="320"></div>
</td>
</tr>
<tr>
<td width="66" valign="top"><div align="left"><img src="menu_img/button1a_links.gif" width="116" height="40"></div>
<div align="left"></div></td>
<td width="100" bgcolor="#FFFFFF" valign="top">
<span class="preload2"></span>
<ul class="menu2">
<li class="top"><a href="index-2.html" target="_self" class="top_link"><span class="down">AKTUELLES</span></a>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="1_feuerwehr.html">Feuerwehr News</a></li>
<li><a href="1_termine.html">Termine</a></li>
<li><a href="1_einsaetze.html" class="fly">Einsätze</a>
<table><tr><td>
<ul>
<li><a href="1_einsaetze.html">Einsätze 2008</a></li>
<li><a href="1_statistiken.html">Statistiken</a></li>
<li><a href="1_pol_einsaetze.html">Polizei</a></li>
</ul></td></tr></table>
</li>
<li><a href="1_wetterwarnungen.html">Wetterwarnungen</a></li>
<li><a href="1_rescuedays2009.html">2009</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="2_ihrefeuerwehr.html" target="_self" class="top_link"><span class="down">FEUERWEHR</span></a>
<table><tr><td>
<ul class="sub">
<li><a href="2_ihrefeuerwehr.html">Ihre Feuerwehr</a></li>
<li><a href="2_einsatzgebiet.html" class="fly">Einsatzgebiet</a>
<table><tr><td>
<ul>
<li><a href="2_einsatzgebiet.html">Einsatzgebiet</a></li>
<li><a href="2_harksheide.html">W1</a></li>
<li><a href="2_garstedt.html">W2</a></li>
<li><a href="2_glashuette.html">W3</a></li>
<li><a href="2_friedrichsgabe.html">W4</a></li>
</ul> </td></tr></table>
</li>
<li><a href="2_jugendfeuerwehr.html">Jugendfeuerwehr</a></li>
<li><a href="2_ausbildung.html">Ausbildung</a></li>
<li><a href="2_technik.html" class="fly">Technik</a>
<table><tr><td>
<ul>
<li><a href="2_fuhrpark.html">Fuhrpark</a></li>
<li><a href="2_kleidung.html">Kleidung</a></li>
<li><a href="2_alarmierung.html">Alarmierung</a></li>
</ul></td></tr></table>
</li>
<li><a href="2_geschichte.html">Geschichte</a></li>
<li><a href="2_mitmachen.html">Mitmachen!</a></li>
</ul>
</td></tr></table>
</li>
<li class="top"><a href="3_amt37.html" target="_self" class="top_link"><span class="down">AMT</span>
</a>
<table><tr><td>
<ul class="sub">
<li><a href="3_amt37.html">Amt</a></li>
<li><a href="3_ftz.html">FW Techn. Zentrum</a></li>
<li><a href="3_leitstelle.html">Leitstelle</a></li>
<li><a href="3_brandschutzerziehung.html">Brandschutzerz.</a></li>
</ul>
</td></tr></table>
</li>
<li class="top"><a href="4_wichtig.html" target="_self" class="top_link"><span class="down">WICHTIG</span>
</a>
<table><tr><td>
<ul class="sub">
<li><a href="4_notruf.html">Notruf 112</a></li>
<li><a href="4_erstehilfe.html">Erste Hilfe</a></li>
<li><a href="4_sonderrechte.html">Sonderrechte</a></li>
<li><a href="4_brandschutz.html" class="fly">Brandschutz</a>
<table><tr><td>
<ul>
<li><a href="4_umgangmitfeuer.html">Umgang mit Feuer</a></li>
<li><a href="4_feuerloescher.html">Feuerlöscher</a></li>
<li><a href="4_rauchmelder.html">Rauchmelder</a></li>
<li><a href="4_nachdemfeuer.html">Nach dem Feuer</a></li>
</ul></td></tr></table>
</li>
<li><a href="4_krisenintervention.html">Krisenintervention</a></li>
<li><a href="4_kinder.html">Kinder</a></li>
<li><a href="4_imstrassenverkehr.html">Im Straßenverkehr</a></li>
<li><a href="4_verkehrsunfall.html">Verkehrsunfälle</a></li>
<li><a href="4_erdgas.html">Erdgas</a></li>
</ul>
</td></tr></table>
</li>
<li class="top"><a href="5_service.html" target="_self" class="top_link"><span class="down">SERVICE</span>
</a>
<table><tr><td>
<ul class="sub">
<li><a href="5_downloads.html">Downloads</a></li>
<li><a href="5_links.html">Links</a></li>
<li><a href="5_kontakt.html">Kontakt</a></li>
<li><a href="5_impressum.html">Impressum</a></li>
</ul>
</td></tr></table>
</li>
</ul>
</td>
<td width="64"><div align="right"><img src="menu_img/button1a_rechts.gif" width="65" height="40"></div></td>
</tr>
<tr>
<td width="66" bgcolor="#050040"><img src="main_img/Hauptseite_rund_02_langer_strich.gif" alt="" width="116" height="410" border="0" align="top"></td>
<td bgcolor="#050040" class="scroll">
<div class="scroll">
<p>So, </p>
<p> </p>
<p>nun</p>
<p> </p>
<p>ist</p>
<p> </p>
<p>es</p>
<p> </p>
<p>schon</p>
<p> </p>
<p>ziemlich</p>
<p> </p>
<p>spät</p>
<p> </p>
<p>oder</p>
<p> </p>
<p>soll</p>
<p> </p>
<p>ich</p>
<p> </p>
<p>sagen</p>
<p> </p>
<p>früh?</p>
</div>
</td>
<td bgcolor="#050040"><div align="left"><img src="main_img/Hauptseite_rund_05_langer_strich.gif" alt="" width="65" height="410" border="0" align="top"></div></td>
</tr>
<tr>
<td width="66" height="60" bgcolor="#050040"><div align="left"><span class="Stil1"><img src="main_img/Hauptseite_rund_02_kleine_ecke.gif" alt="" width="116" height="60" border="0" align="top"></span></div></td>
<td bgcolor="#050040"><img src="menu_img/Hauptseite_rund_02_kurzer_strich_mitte.gif"
width="740" height="60"></td>
<td><div align="left"><span class="Stil1"><img src="main_img/Hauptseite_rund_05_kleine_ecke.gif" alt=""
width="65" height="60
" border="0" align="top"></span></div></td>
</tr>
</table>
<p align="center" class="Stil1 Stil2">Copyright © Freiwillige Feuerwehr Rothenburgsort/Veddel. Alle Rechte vorbehalten.</p>
Und hier das CSS:
Code:
body {
background-color: #D4D4D4;
}
.Stil1 {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
.Stil2 {
font-size: x-small;
color: #666666;
}
.scroll {
overflow: auto;
position: relative;
height: 380px;
width: 100%;
}
.preload2 {background: url(menu_img/button4.gif);}
.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(menu_img/button1a.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#ffffff; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(menu_img/down.gif) no-repeat right top;}
.menu2 li a.top_link:hover {color:#fff; background: url(menu_img/button4.gif) no-repeat;}
.menu2 li a.top_link:hover span {background:url(menu_img/button4.gif) no-repeat right top;}
.menu2 li a.top_link:hover span.down {background:url(menu_img/button4a.gif) no-repeat right top;}
.menu2 li:hover > a.top_link {color:#fff; background: url(menu_img/button4.gif) no-repeat;}
.menu2 li:hover > a.top_link span {background:url(menu_img/button4.gif) no-repeat right top;}
.menu2 li:hover > a.top_link span.down {background:url(menu_img/button4a.gif) no-repeat right top;}
.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
/* Default link styling */
/* Style the list OR link hover. Depends on which browser is used */
.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}
/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu2 :hover ul.sub {
left:2px;
top:40px;
background: #fff;
padding:3px 0;
border:1px solid #000000;
white-space:nowrap;
width:110px;
height:auto;
}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub li a {display:block; text-align:left; font-size:11px; height:20px; width:104px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub li a.fly {background:#fff url(menu_img/arrow.gif) 95px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover {background:#CC0000; color:#fff;}
.menu2 :hover ul.sub li a.fly:hover {background:#CC0000 url(menu_img/arrow_over.gif) 95px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#CC0000 url(menu_img/arrow_over.gif) 95px 7px no-repeat; color:#fff;}
.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:107px; top:-4px; background: #fff; padding:3px 0; border:1px solid #000000; white-space:nowrap; width:110px; z-index:200; height:auto;}