Question

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

目前我的导航系统托管在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>

和我的Jquery

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

我试图用来解决问题的CSS

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


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

但这对我不起作用。

Answer 1

您是否尝试过更改

的CSS

导航ul ul ul

应该留下一些100px;

所以

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

嵌套菜单使用Jquery和CSS

1 个答案: