#nav .acc ul {
	padding-left: 9px; /* Dies ist die Einrueckung des Untermenues */
}
#nav ul.openmenu li {
	position: relative;
}
/* In den nächsten beiden Elementen steckt der Teufel im Detail:
	Die beiden Pfeile fuers Menue sind in einer einzigen Grafik untergebracht und werden
	mit der Hintergrundverschiebung positioniert.
*/
#nav ul li a.sf-with-ul {
    background: transparent url(../assets/arrows.gif) no-repeat scroll right -26px;
}
#nav ul li.acc>a { 
    background: transparent url(../assets/arrows.gif) no-repeat right 9px; 
}

/* Dies ist der wirklich spannende Part */
#nav ul li ul.flyout { 
	position: absolute; 
	z-index: 100; /* Damit alles über dem Text liegt, ggf. erhoehen */
	top: -5px; /* Hiermit habe ich die Elemente vertikal ausgerichtet */
	/*  Dieser Wert korreliert mit der Einrueckung und muss bei 
		Vergroesserung der Einrueckung symmetrisch verkleinert werden, bzw.
		anders herum.
		Erklaerung: Der Wert gilt von der linken oberen Ecke des Elternelements, da das
		Elternelement relativ positioniert ist und dieses Element absolut. (s.o. bei #nav ul.openmenu li)
		Wenn das Elternelement jetzt nach innen verschoben wird, wird dieses Element parallel mitverschoben. Damit
		das Flyout an der selben Stelle bleibt, muss man diesen Abstand also analog veraendern. 
		Hier wird schoen deutlich, warum das ganze Cascading Stylesheet heisst ;-)
	*/
	left: 198px; 
	
	width: 210px; /* Die Breite des Flyouts - hab ich etwas vergroessert damit alle Eintraege einzeilig sind */
	padding-left: 1px; /* Der graue linke Randabstand im Flyout - wuerde ich nicht zu gross machen */
	background-color: #f3f3f3; 
	border: 1px dotted #d7d7d7; /* Ich bevorzuge die Kurzschreibweise - so als Hardcoder ;-) */
	border-bottom: 0; 
	border-left: 0;
}
#nav ul li#id21 ul.flyout {
	left: 189px;
}
#nav ul li ul.flyout li {
	margin-bottom: 2px; /* Abstand der Elemente im Flyout */
}
.sf-sub-indicator {
    display: none; /* Zeigt ein » hinter dem Eintrag im Flyout an - oder wie hier eben nicht :-) */
}