|
|||
Problem mit CSS - Attribute für hover
Hallo zusammen, meine Navigation sieht so aus:
Code:
<div class="menu"> <ul> <li><a href="http://www.forsthaus-auerhahn.de/zimmer.php" onclick="winopen()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Zimmer','','http://www.forsthaus-auerhahn.de/images/buttons/hover_zimmer-preise.gif',1)"><img src="http://www.forsthaus-auerhahn.de/images/buttons/zimmer-preise.gif" alt="Zimmer und Preise" name="Zimmer" width="108" height="18" border="0" /><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.forsthaus-auerhahn.de/arrangements.php" title="Arrangements">- Arrangements</a></li> <li><a href="http://www.forsthaus-auerhahn.de/kurzaufenthalte.php" title="Kurzaufenthalte bis zwei Nächte">- Kurzaufenthalte</a></li> <li><a href="http://www.forsthaus-auerhahn.de/einzelzimmer.php" title="Einzelzimmer">- Einzelzimmer</a></li> <li><a href="http://www.forsthaus-auerhahn.de/doppelzimmer.php" title="Doppelzimmer">- Doppelzimmer</a></li> <li><a href="http://www.forsthaus-auerhahn.de/appartements.php" title="Appartements">- Appartements</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.forsthaus-auerhahn.de/wellness.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wellness','','http://www.forsthaus-auerhahn.de/images/buttons/hover_beautywellness.gif',1)"><img src="http://www.forsthaus-auerhahn.de/images/buttons/beauty-wellness.gif" alt="Wellness" name="Wellness" width="113" height="18" border="0" /><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.forsthaus-auerhahn.de/wellness.php" title="Beauty und Wellnessbereich">- Wellnessbereich</a></li> <li><a href="http://www.forsthaus-auerhahn.de/wellnesspakete.php" title="Wellnesspakete">- Verwöhnpakete</a></li> <li><a href="http://www.forsthaus-auerhahn.de/wellness-koerperbehandlungen.php" title="Koerperbehandlungen">- Körperbehandlungen</a></li> <li><a href="http://www.forsthaus-auerhahn.de/wellness-gesichtsbehandlungen.php" title="Gesichtsbehandlungen">- Gesichtsbehandlungen</a></li> <li><a href="http://www.forsthaus-auerhahn.de/wellness-exclusivangebote.php" title="Exclusivangebote">- Exclusivangebote</a></li> <li><a href="http://www.forsthaus-auerhahn.de/wellness-haende-fuesse.php" title="Wellness für Ihre Füße und Hände">- Füße und Hände</a></li> <li><a href="http://www.forsthaus-auerhahn.de/wellness-softpack.php" title="Behandlungen in der Softpackliege">- Softpackliege</a></li> <li><a href="http://www.forsthaus-auerhahn.de/wellness-ayurveda.php" title="Ayurveda">- Ayurveda</a></li> <li><a href="http://www.forsthaus-auerhahn.de/wellness-friseur.php" title="Friseurstüble">- Friseurstüble</a></li> <li><a href="http://www.forsthaus-auerhahn.de/wellness-massage.php" title="Massagen">- Massagen</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.forsthaus-auerhahn.de/kinder.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kinder','','http://www.forsthaus-auerhahn.de/images/buttons/hover_kinder.gif',1)"><img src="http://www.forsthaus-auerhahn.de/images/buttons/kinder.gif" alt="Kinderfreundlich" name="Kinder" width="42" height="18" border="0" /><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.forsthaus-auerhahn.de/kinder.php" title="Kleine ganz groß">- Kleine ganz groß</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.forsthaus-auerhahn.de/anreise.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Anreise','','http://www.forsthaus-auerhahn.de/images/buttons/hover_anreise.gif',1)"><img src="http://www.forsthaus-auerhahn.de/images/buttons/anreise.gif" alt="Anreise" name="Anreise" width="47" height="18" border="0" /><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.forsthaus-auerhahn.de/anreise.php" title="Mit dem Auto">- Mit dem Auto</a></li> <li><a href="http://www.forsthaus-auerhahn.de/anreise_bahn_bus.php" title="Mit Bus & Bahn">- Mit Bus & Bahn</a></li> <li><a href="http://www.forsthaus-auerhahn.de/anreise_heli_air.php" title="Mit dem Helikopter">- Mit dem Helikopter</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.forsthaus-auerhahn.de/kontakt.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kontakt','','http://www.forsthaus-auerhahn.de/images/buttons/hover_kontakt.gif',1)"><img src="http://www.forsthaus-auerhahn.de/images/buttons/kontakt.gif" alt="Kontakt" name="Kontakt" width="51" height="18" border="0" /><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.forsthaus-auerhahn.de/anfrage.php" title="Anfrage">- Anfrage</a></li> <li><a href="http://www.forsthaus-auerhahn.de/kontakt.php" title="Adresse">- Adresse / Ruhetag</a></li> <li><a href="http://www.forsthaus-auerhahn.de/tischreservierung.php" title="Tischreservierung">- Tischreservierung</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.seibelseckle.de" target="_blank"><img src="http://www.forsthaus-auerhahn.de/images/buttons/seibelseckle.gif" alt="Gemütliche Rasthütte Seibelseckle an der Schwarzwaldhochstraße" width="142" height="18" border="0" /><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul><li></li></ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> Code:
.menu { font-size:0.85em; position:relative; z-index:100; } /* remove all the bullets, borders and padding from the default list styling */ .menu ul { padding:0; margin:0; list-style-type:none; } .menu ul ul { width:; } /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ .menu li { float:left; width:; position:relative; } /* style the links for the top level */ .menu a, .menu a:visited { font-family: Arial, Helvetica, sans-serif; display:block; font-size:11.5px; font-weight: bold; text-align: left; text-decoration:none; color:#fff; border:0px solid #fff; border-width:0; background:#D0E2A9; padding-left:0; padding-right:12px; line-height:12px; } /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited { w\idth:40px; } /* style the second level background */ .menu ul ul a.drop, .menu ul ul a.drop:visited { background:#d4d8bd; } /* style the second level hover */ .menu ul ul a.drop:hover{ background:#D0E2A9; } .menu ul ul :hover > a.drop { background:#D0E2A9; } /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited { background:#D0E2A9; } /* style the third level hover */ .menu ul ul ul a:hover { background:#D0E2A9; } /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul { visibility:hidden; position:absolute; top:18px; left:0; width:; } /* another hack for IE5.5 */ * html .menu ul ul { top:18px; t\op:19px; } /* style the table so that it takes no ppart in the layout - required for IE to work */ .menu table {position:absolute; top:0; left:0;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { background:#D0E2A9; width:140px; color:#000; height:auto; line-height:12px; padding:5px 10px; /* yet another hack for IE5.5 */ } * html .menu ul ul a{ w\idth:140px; } /* style the top level hover */ .menu ul ul a:hover{ color:#fff; background:#d0e2a9; } .menu a:hover{ color:#fff; background:#949e7c; } .menu :hover > a{ color:#fff; background:#d0e2a9; } .menu ul ul :hover > a { color:#fff; background:#d0e2a9; } /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul{ visibility:visible; } /* keep the third level hidden when you hover on first level list OR link */ .menu ul :hover ul ul{ visibility:hidden; } /* make the third level visible when you hover over second level list OR link */ .menu ul :hover ul :hover ul{ visibility:visible; } Code:
.menu a:hover{ color:#fff; background:#949e7c; } .menu :hover > a{ color:#fff; background:#949e7c; } Code:
.menu a:hover{ color:#fff; background:#d0e2a9; } .menu :hover > a{ color:#fff; background:#d0e2a9; } An was kann das liegen? Gruß t.zepf Geändert von tzepf (09.12.2006 um 18:07 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 17:09 |
Hilfe bei CSS Navigation | trimalchio | CSS | 7 | 10.01.2011 14:13 |
Problem mit CSS Menü | SMundt | CSS | 9 | 07.01.2009 20:12 |
Darstellungsproblem CSS Navigation im IE7 | pcklinik | CSS | 7 | 09.09.2007 18:25 |
CSS Einsteiger bittet um Hilfe | pcklinik | CSS | 0 | 06.09.2007 15:40 |