Javascript 使用Jquery和CSS的嵌套菜单

我正在尝试使用jquery和css创建一个嵌套的导航菜单

目前，我的nav托管在xetecx.comxa.com上。问题是嵌套子菜单在主菜单上不会像本视频中显示的正确嵌套菜单那样向右移动

https://drive.google.com/file/d/0B0sCu8aj8zu2UzBxQnVlQWdzcUU/edit?usp=sharing

如果您单击xetecx.comxa.com上的菜单

这是我的html

<ul>
            <li>
                <a href="#" title="Nav Link 1"><img src="img/main.png" /></a>
                <ul>
                    <li>
                        <a href="#" title="Sub Nav Link 1">Retails</a>
                        <ul>
                            <li>
                                <a href="#" title="Sub Nav Link 1">R</a>
                            </li>
                            <li>
                                <a href="#" title="Sub Nav Link 2">S</a>
                            </li>
                            <li>
                                <a href="#" title="Sub Nav Link 3">A</a>
                            </li>
                            <li>
                                <a href="#" title="Sub Nav Link 4">C</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" title="Sub Nav Link 2">Services</a>
                    </li>
                    <li>
                        <a href="#" title="Sub Nav Link 3">About Us</a>
                    </li>
                    <li>
                        <a href="#" title="Sub Nav Link 4">Contact Us</a>
                        <ul>
                            <li>
                                <a href="#" title="Sub Nav Link 1">R</a>
                            </li>
                            <li>
                                <a href="#" title="Sub Nav Link 2">S</a>
                            </li>
                            <li>
                                <a href="#" title="Sub Nav Link 3">A</a>
                            </li>
                            <li>
                                <a href="#" title="Sub Nav Link 4">C</a>
                            </li>
                        </ul>

                    </li>
                </ul>
            </li>
            <li>
                <a href="#" title="Nav Link 1"><img src="img/social.png" /></a>
                <ul class="social">
                    <li>
                        <a href="#" title="Sub Nav Link 1"><img src="img/facebook.png" /></a>
                    </li>
                    <li>
                        <a href="#" title="Sub Nav Link 2"><img src="img/twitter.png" /></a>
                    </li>
                    <li>
                        <a href="#" title="Sub Nav Link 3"><img src="img/linked.png" /></a>
                    </li>
                </ul>
            </li>
        </ul>

---

但这对我不起作用

您是否尝试过为更改css

导航ul

应该剩下大约100像素

所以

(function($) {

            //cache nav
            var nav = $("#topNav");

            //add indicators and hovers to submenu parents
            nav.find("li").each(function() {
                if ($(this).find("ul").length > 0) {

                    $("<span>").appendTo($(this).children(":first"));

                    //show subnav on hover
                    $(this).mouseenter(function() {
                        var ullist = $(this).find("ul");
                        ullist.stop(true, true).slideDown();

                        ullist.addClass("ullist");
                    });

                    //hide submenus on exit
                    $(this).mouseleave(function() {
                        var ullist = $(this).find("ul");
                        ullist.stop(true, true).slideUp();
                        ullist.removeClass("ullist");
                    });
                }
            });
        })(jQuery);

nav > ul > li > a > img {
width:60px;
height:60px;
}


.social li > a > img{
    width:40px;
height:40px;
}

.nav ul ul ul
{
left:100px;
}