Fehler/Warnunge in jQuery etc.

[ingobar]

Erstelle ein modernes Menü auf Basis von HTML und CSS unter zuhilfenahme der :hover-Pseudoklasse.

Manipuliere das Menü dann mittels JavaScript/jQuery um anstatt des harten ein/ausklappens mittels :hover lieber entsprechende Effekte zu verwenden.

Das hier sollte für ein einfaches Menü bereits völlig ausreichen und ist entsprechend ausbaufähig - natürlich nicht getestet :)

jQuery(#navigation>ul li).hover(

function() {
    jQuery('ul', this).show();
  },
  function() {
    jQuery('ul', this).hide();
  },
);

  
Ich habe das jetzt soweit wie es geht mit css selber gemacht. Habe allerdings das Problem, dass beim Ausklappen des Menüs der darunterliegende content nach unten geschoben wird. Ich habe jetzt schon mit z-index versucht was zu machen, aber das auch nicht geklappt.  
  
~~~css
  
ul#main-nav {  
	font-family:helvetica,arial,sans-serif;  
	margin:0; padding:0;  
	float:left;  
	width:100%;  
	background:#f00;  
}  
  
ul#main-nav li {  
	margin:0;padding:0;  
	list-style:none;  
	float:left;  
	margin:0 0.3em 0 0;  
	width:9em;  
}  
  
ul#main-nav li a {  
	text-decoration:none;  
	display:block;  
	padding:0.3em 0.5em;  
	color:#003;  
	background:#fff;  
}  
  
ul#main-nav li ul li a:hover, ul#main-nav li ul li a:focus {  
	color:#000;  
	background:#efefef;  
}  
  
ul#main-nav li ul {  
	padding:0;  
	display:none;  
}  
  
ul#main-nav li:hover ul {  
	display:block;  
}  
  
ul#main-nav li ul li {  
	float:none;  
}  
  
ul#main-nav li ul li a {  
	font-size:0.9em;  
}  
  

ingobar