Children in Superfish-submenu hide, when using hoverintent (jquery)

Question

I am about to use hoverintent together with jquery and superfish.

I just added the hoverintent-plugin to my working superfish-menu and hoped, that they work out of the box (as written on the description). Well, the hoverintent-functionality worked fine, indeed. But, when my mouse moves from toplevel of the menu to one of the children, the child disappears and starts flickering.

I found the information, that hoverintent ignores children of the menu, which seems to be my problem. But all the examples of superfish work pretty fine: http://users.tpg.com.au/j_birch/plugins/superfish/examples/nav-bar/

So I am asking: What am I doing wrong? Do I have to activate any option?

HTML-code:

<div id="menu">
    <ul class="sf-menu">
        <li>
            <a href="#" class="p1">Über Uns</a>
            <ul class="ebene2">
                <li><a href="#"><span class="m_bild"><img src="bilder/moebel/"></span><span class="m_text">Unsere Werte</span></a>
                </li>
                <li><a href="#"><span class="m_bild"><img src="bilder/moebel/"></span><span class="m_text">Hausrundgang</span></a>
                  <ul class="ebene3">
                    <li><a href="#">Itzehoe</a></li>
                    <li><a href="#">Hamburg</a></li>
                    <li><a href="#">Werkstatt</a></li>
                  </ul>
                </li>
                <li><a href="#"><span class="m_bild"><img src="bilder/moebel/"></span><span class="m_text">Showroom</span></a></li>
                <li><a href="#"><span class="m_bild"><img src="bilder/moebel/"></span><span class="m_text">Aktuelles</span></a></li>
            </ul>
        </li>
...

CSS-Code (if needed):

#menu {
    position:relative;
    background:@weiss;

    padding-top:5px;
    padding-bottom:5px;

    margin-bottom:2*@abstand;
}
#menu a{
    color:@schwarz;
    font-weight:normal;
    text-transform:uppercase;
    display:block;

    padding-top:10px;
    padding-bottom:10px;

    .transit;
}
#menu a:hover{
    color:@rot;
}

#menu > ul {
    position:relative;
    margin:0px;
    padding:0px;
}

#menu > ul > li {
    display:block;
    float:left;

    width:@gesamtbreite / 7;

    text-align:center;
    color:@weiss;
    font-weight:normal;

    background:url(bilder/slash.png) no-repeat right 10px;

}
#menu > ul > li:hover > a {
    color:@rot;
}
#menu > ul > li.letzter {
    background:none;

}
#menu .ebene2 {
    position:absolute;

    padding:0px;
    margin:0px;
    left:0px;
    right:0px;
    top:45px;

    background:@grau_logo;

    z-index:100;
}
#menu .ebene2 li{
    position:relative;
    float:left;

    /*width:@gesamtbreite / 7 - 6;*/
    list-style:none;
    background:url(bilder/bg_ebene2.jpg) repeat-x 0px 0px;

    margin:0px; 

    .transit;
}
#menu .ebene2 li:hover{
    background:url(bilder/bg_ebene2.jpg) repeat-x 0px -65px;
}
#menu .ebene2 li:hover a{
    color:@schwarz;
}
#menu .ebene2 li a{
    position:relative;
    display:block;
    padding-top:25px;
    padding-bottom:5px;
    padding-left:10px;
    padding-right:10px;
    height:35px;
    color:@weiss;
    overflow:hidden;
}
#menu .ebene2 li a:hover{
    color:@rot;
}
#menu .ebene2 li a .m_bild{
    position:relative;
    display:block;
    float:left;
    top:-8px;
    height:35px;
}
#menu .ebene2 li a .m_text{
}
#menu .ebene2 li a img{
    height:35px;
    width:inherit !important;
    margin-right:5px;
}
#menu .ebene2 li a span{
}

Finally Javascript-Code:

$(window).load(function() {
    $('ul.sf-menu').superfish({
            animation:   {height:'show'},      
            speed:       300,                   // faster animation speed
            delay:       100,
            autoArrows:  false,                  // disable generation of arrow mark-up
            dropShadows: false                  // disable drop shadows
    }); 
});

I hope, someone can help me with this.

Regards

Chricken