1

我即将将 hoverintent 与 jquery 和 superfish 一起使用。

我刚刚将 hoverintent-plugin 添加到我的工作超级鱼菜单中，并希望它们能够开箱即用（如描述中所述）。好吧，hoverintent 功能确实运行良好。但是，当我的鼠标从菜单的顶层移动到其中一个孩子时，孩子会消失并开始闪烁。

我找到了信息，即 hoverintent 忽略了菜单的子项，这似乎是我的问题。但是所有超级鱼的例子都很好：http ://users.tpg.com.au/j_birch/plugins/superfish/examples/nav-bar/

所以我问：我做错了什么？我必须激活任何选项吗？

HTML代码：

<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 代码（如果需要）：

#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{
}

最后是Javascript代码：

$(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
    }); 
});

我希望，有人可以帮助我解决这个问题。

问候

克里肯

4

0 回答 0