Hilfe mit Javascipt und jquery

Huhu Ihr Lieben!

Ich habe da ein Problem. Ich habe folgende Funktion:

$(document).ready(function() {                                        
	 $(".menu").hover(
     function() {
         $(this).fadeOut(500, function() {
             $(this).html('Hast du Lust, Mitglied zu werden?').fadeIn(400);
         });
     },
     function() {
         $(this).fadeOut(500, function() {
             $(this).html('Registrierung').fadeIn(400);
         });
     });
 }); [/code]

Diese steht in der Datei "main.js". Jetzt will ich in meiner HTML-Datei, einen Kasten haben, der mit dieser Funktion ausgestattet wird. Dafür muss der Kasten ja die ID "menu" haben (siehe Funktionscode, Zeile 2). Habe ich jetzt aber folgenden Code:
[code]<ul id="menu">
				<li><a href="#">KASTEN 1</a></li>
				<li><a href="#">KASTEN 2</a></li>
				<li><a href="#">KASTEN 3</a></li>
				<li><a href="#">KASTEN 4</a></li>
				<li><a href="#">KASTEN 5</a></li>
			</ul>[/code]

Der Code ist nur ein Ausschnitt. In der CSS-Datei habe ich jetzt folgendes:
[code]/* Menü UL */
			#menu {
				padding:0px;
				margin:0px;
			}
			
			/* Eine Zeile, muss gefloatet werden, Kein Listensymbol */
			#menu li {
				list-style:none;
				padding:0px;
				margin:0px;
				float:left;
				width:20%;
			}
			
			/* Der Link, Block, damit er die 20% ausfüllt */
			#menu li a {
				display:block;
				padding:10px;
				margin:0px 1px;
				text-align:center;
				text-decoration:none;
				background:#666699;
				color:#FFF;
				font-weight:bold;
			}

Was ist daran jetzt falsch? Ich finde den Fehler einfach nicht. Vielleicht sehe ich den Wald auch nur vor lauter Bäumen nicht. Vielleicht ist aber auch ein dicker Fehler drin.

Ich wäre hilfreich für jede Hilfe.

Liebe Grüße

Joey

Du selektierst mit $(".menu") alle Elemente der Klasse “menu”.

http://api.jquery.com/category/selectors/