zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit CSS - Attribute für hover

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.12.2006, 17:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.11.2006
Beiträge: 15
tzepf befindet sich auf einem aufstrebenden Ast
Standard 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&auml;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&ouml;hnpakete</a></li>    
	<li><a href="http://www.forsthaus-auerhahn.de/wellness-koerperbehandlungen.php" title="Koerperbehandlungen">- K&ouml;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&uuml;r Ihre F&uuml;&szlig;e und H&auml;nde">- F&uuml;&szlig;e und H&auml;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&uuml;ble">- Friseurst&uuml;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&szlig;">- Kleine ganz gro&szlig;</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 &amp; 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&uuml;tliche Rasth&uuml;tte Seibelseckle an der Schwarzwaldhochstra&szlig;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>
Das Stylesheet sieht so aus:

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;
}
Das funktioniert so auch alles. Ich muss jetzt allerdings die Hintergrundfarbe für die Links ändern, die ständig sichtbar sind. Also folgenden Code:

Code:
.menu a:hover{
color:#fff; 
background:#949e7c;
}
.menu :hover > a{
color:#fff;
background:#949e7c;
}
in diesen ändern:

Code:
.menu a:hover{
color:#fff; 
background:#d0e2a9;
}
.menu :hover > a{
color:#fff;
background:#d0e2a9;
}
So und jetzt klappt das Menü nicht mehr auf. Allerdings nur im Internet Explorer 6, Firefox zeigt es richtig an

An was kann das liegen?

Gruß
t.zepf

Geändert von tzepf (09.12.2006 um 18:07 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:32 Uhr.