eine schöne Navigation gefunden und zwar wenn man drüber fährt, geht eine Unternavigation auf allerdings mit einem kleinen Abstand und einem Pfeil nach oben, gefällt mir wirklich sehr gut.

Hat von euch dieses schon einmal umgesetzt oder gibt es dafür ein deutschsprachiges Tutorial?

Das Tutorial findest Du im Wiki: http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Menüs

Die verschachtelte Liste bekommt in Deinem Beispiel ein Hintergrundbild und einen Abstand nach oben.

.sf-menu li ul {  
    background: url("../images/header_submenu_arrow.png") no-repeat scroll 20px 30px rgba(0, 0, 0, 0);  
    padding-top: 38px;  
    text-align: left;  
    width: 220px;  
}

Du könntest das Dreieck aber auch mit dem Pseudo-Element :after und Border realisieren:

http://blog.undkonsorten.com/css-dreiecke-mit-css-border
http://t3n.de/news/css-geometrische-figuren-reinem-358616/

LG Matthias