嵌套的CSS下拉子菜单

Question

我需要有关下拉菜单的帮助。当我在jsfiddle上尝试代码时，下拉菜单可以工作，但在我的网站上我遇到了嵌套的ul元素（子菜单）没有并排显示的问题。这是我网站的地址：

http://stolni.denis.com.hr.

如果你去Info＆gt; Liga菜单然后新的子菜单应该并排打开，但它不会。 任何帮助表示赞赏。

---

HTML

<div id="navWrapper" class="clearfix">
    <nav class="clearfix">
        <ul id="yw0">
            <li class="active"><a href="/">Naslovnica</a></li>
            <li><a href="/ljestvice">Ljestvice</a>
                <ul>
                    <li><a href="/ljestvice/sezona2013/">Sezona 2013</a></li>
                    <li><a href="/ljestvice/sezona2012/">Sezona 2012</a></li>
                </ul>
            </li>
            <li><span>Info</span>
                <ul>
                    <li><span>Liga</span>
                        <ul>
                            <li><a href="/info/drzavna/">Državna</a></li>
                            <li><a href="/info/fabi/">Fabi</a></li>
                        </ul>
                    </li>
                    <li><a href="/info/savez/">Savez</a></li>
                    <li><a href="/info/itsf/">Itsf</a></li>
                    <li><a href="/info/klubovi/">klubovi</a></li>
                </ul>
            </li>
            <li><a href="/prijava/">Prijava</a></li>
        </ul>
        <a href="#" id="pull">Izbornik</a>
    </nav>
    <div id="breadcrumbs" class="clearfix">
    <div class="breadcrumbs">
    <a href="/">Naslovnica</a> » <span></span></div>               </div>
</div>

脚本

<script type="text/javascript">
    /*<![CDATA[*/
        jQuery('body').popover({'selector':'a[rel=popover]'});
        jQuery('body').tooltip({'selector':'a[rel=tooltip]'});
        jQuery(function($) {
            $('#pull').click(function() {
                $('nav > ul').slideToggle();
            });
            $(window).resize(function(){
                var w = $(window).width();
                if(w > 930 && $('nav ul').is(':hidden')) {
                    $('nav ul').removeAttr('style');
                }
            });
            $('nav ul > li').hover(function(e) {
                e.preventDefault();
                $(this).children('ul').stop().slideDown();
            },
            function(e){
                e.preventDefault();
                $(this).children('ul').stop().slideUp();
            });
        });
    /*]]>*/
</script>

风格

nav{
    font-size: 110%;
    text-transform: uppercase;
    width: 910px;
    background-color: #0099CC;
    border-bottom: 1px solid #006699;
    margin: 0 auto;
}
nav ul{
    margin: 0;
    padding: 0;
    height: 40px;
}
nav li {
    display: inline-block;
    float: left;
    list-style: none;
    line-height: 40px;
    width: 130px;
    -moz-transition: background-color 550ms ease-in-out;
    -webkit-transition: background-color 550ms ease-in-out;
    -o-transition: background-color 550ms ease-in-out;
    -ms-transition: background-color 550ms ease-in-out;
    transition: background-color 550ms ease-in-out;
}

nav li:hover {
    background-color: #006699;
}
nav li span{
    display: block;
    color: black;
    text-align: center;
    border-right: 1px solid #006699;
    -moz-transition: color 550ms ease-in-out;
    -webkit-transition: color 550ms ease-in-out;
    -o-transition: color 550ms ease-in-out;
    -ms-transition: color 550ms ease-in-out;
    transition: color 550ms ease-in-out;
}
nav li span:hover{
    cursor: default;
    color: white;
}
nav a{
    display: block;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    border-right: 1px solid #006699;
}
nav li:last-child a {
    border-right: 0;
}
nav li a:link,
nav li a:visited{
    color: black;
    display: block;
    padding: 0;

}
nav li a:hover,
nav li a:active{
    color: white;
    text-decoration: none;
}
nav a#pull {
    display: none;
}
nav li.active{
    background-color: #006699;
}
nav li.active > a{
    color: white;
}

nav ul ul,
nav ul ul ul{
    width: 131px;
    position: absolute;
    display: none;
    height: auto;
    list-style: none;
    -moz-transition: opacity 550ms ease-in-out;
    -webkit-transition: opacity 550ms ease-in-out;
    -o-transition: opacity 550ms ease-in-out;
    -ms-transition: opacity 550ms ease-in-out;
    transition: opacity 550ms ease-in-out;
    margin-left: -1px;

}
nav ul ul ul {
    left: 90%;
    top: 0;
    z-index: 1001;
}
nav ul ul li,
nav ul ul ul li {
    display: inline-block;
    float: none;
    width: 131px;
    background-color: #0099CC;
}
nav ul ul li a {
    border: 0;
    border-top: 1px solid #006699;

}

Answer 1

发现一件可能有帮助的事情。找到以下行：

$(this).children('ul').stop().slideDown();

并尝试更改它：

$(this).children('ul').stop().slideDown(function() { $(this).css('overflow', '') });