Firefox und Hover Effekt

[Frosty]

Hallo Leute,

habe ein Problem mit meiner aktullen CSS Datei. Im IE funktioniert die Interpretation einwandfrei - beim Firefox musste ich aber feststellen, dass der Hover Effekt nun so überhaupt nicht funktioniert :((

Hier der Quelltext:

  
#sidebar ul {  
	list-style-type: none;  
	width: 100%;  
	display: block;  
	margin: 0;  
	padding: 0;  
}  
#sidebar li {  
	display: block;  
	border: 1px solid #cdf;  
}  
#sidebar a {  
	font-weight: bold;  
	text-decoration: none;  
	color: #04b;  
	display: block;  
	padding: 5px;  
	border-bottom: 1px solid #f9f9f9;  
}  
#sidebar a:hover {  
	font-weight: bold;  
	text-decoration: none;  
	color: #04b;  
	border-bottom: 1px solid #f9f9f9;  
	background-color: #f9f9f9;  
}  
#sidebar ul li ul li {  
	display: block;  
	border: 1px solid #cdf;  
}  
#sidebar ul li ul {  
	visibility: hidden;  
	position: absolute;  
	left: 190px;  
	background-color: #ffcc66;  
	margin: -31px;  
	  
}  
#sidebar ul li:hover ul {  
	visibility: visible;  
	  

	  
<div id="sidebar">  
	<ul>  
		<li><a href="links/links.htm">Links</a></li>  
		<li><a href="impressum/impressum.htm">Impressum</a></li>  
			<ul>  
				<li>  
				<a href="impressum/impressum.htm">Impressum</a></li>  
				<li>  
				<a href="impressum/impressum.htm">Impressum</a></li>  
				<li>  
				<a href="impressum/impressum.htm">Impressum</a></li>  
			</ul>  
		<li><a href="impressum/impressum.htm">Impressum</a></li>  
	</ul>  
</div>  
  
  

Könnt Ihr mit hier helfen?
Danke schon mal im Voraus,
Forsty :-)

[Auge]

Hallo

habe ein Problem mit meiner aktullen CSS Datei. Im IE funktioniert die Interpretation einwandfrei - beim Firefox musste ich aber feststellen, dass der Hover Effekt nun so überhaupt nicht funktioniert :((

Das darf er auch nicht.

Hier der Quelltext:

#sidebar ul {
list-style-type: none;
width: 100%;
display: block;

/* ul ist schon ein Blockelement */

margin: 0;
padding: 0;
}
#sidebar li {
display: block;
border: 1px solid #cdf;
}
#sidebar a {
font-weight: bold;
text-decoration: none;
color: #04b;
display: block;
padding: 5px;
border-bottom: 1px solid #f9f9f9;
}
#sidebar a:hover {
font-weight: bold;
text-decoration: none;
color: #04b;
border-bottom: 1px solid #f9f9f9;
background-color: #f9f9f9;

/* Die Angaben, die zu #sidebar a gleichlautend sind, musst du hier nicht wiederholen */

}
...
#sidebar ul li ul {
visibility: hidden;
position: absolute;
left: 190px;
background-color: #ffcc66;
margin: -31px;

}
#sidebar ul li:hover ul {
visibility: visible;

/* Die anschließend von mir nachgetragene schließende
   Klammer fehlte hoffentlich nur im hier vorgetragenen
   Code und nicht im Originalcode. */

}

  
Jetzt zum eigentlichen Problem:  
	  

> ~~~html

<div id="sidebar">  

> 	<ul>  
> 		<li><a href="links/links.htm">Links</a></li>  
> 		<li><a href="impressum/impressum.htm">Impressum</a></li>  
> 			<ul>  
> 				<li>  
> 				<a href="impressum/impressum.htm">Impressum</a></li>  
> 				<li>  
> 				<a href="impressum/impressum.htm">Impressum</a></li>  
> 				<li>  
> 				<a href="impressum/impressum.htm">Impressum</a></li>  
> 			</ul>  
> 		<li><a href="impressum/impressum.htm">Impressum</a></li>  
> 	</ul>  
> </div>

Du fügst die innere Liste an der falschen Stelle ein. Einerseits darf sie dort, wo sie ist, nicht sein, sie muss innerhalb eines Listenpunkts notiert werden. Andererseits passt sie so natürlich nicht zu #sidebar ul li:hover ul, denn dort wird -- richtigerweise -- nach einer Liste, die sich *innerhalb* eines Listenpunkts befindet, gefragt.

<ul>  
 <li>Bla <!-- Listenpunkt 1 -->  
  <ul>  
   <li>fu</li>  
   <li>bar</li>  
  </ul>  
 </li><!-- Ende Listenpunkt 1 -->  
 <li>Blubb</li>  
</ul>

Tschö, Auge

[Cheatah]

Hi,

habe ein Problem mit meiner aktullen CSS Datei. Im IE funktioniert die Interpretation einwandfrei - beim Firefox musste ich aber feststellen, dass der Hover Effekt nun so überhaupt nicht funktioniert :((

und "funktioniert nicht" bedeutet, dass Du Deine Codes validiert und Fehler festgestellt hast, ohne sie zu korrigieren?

Cheatah