Question

我创建了一个带下拉菜单的jQuery菜单，但是当我将鼠标悬停在subMenu项目上时，我希望它们向左打开。但是，我可以做的唯一结果，或者他们在当前子菜单中打开，或者如果我添加一个位置：绝对或位置：相对并给它们左边或左边边距：它们是不可见的。

这是指向jsfiddle'的链接，它会垂直打开。

我的CSS：

            .mainLinks {
            width: 150px;

            padding: 0;
            margin: 0;
            display: inline-block;
            float: left;

            text-align: center;
            font-size: 18px;

            background-color: #000000;
        }

        .mainLinks a {
            padding: 10px 0;
            display: block;

            color: #ffffff;
        }

        .mainLinks a:hover {
            background: #0000bb
        }

        .sub {
            position: relative;
        }

        .sub li a {
            display: block;
            float: none;
        }

        .subSub {
            position: relative;
        }

        .subSub li a {
            display: block;
            float: none;
        }

这是我的jQuery。

    $(document).ready(function() {
            $('.sub').hide();
            $('.subSub').hide();

            $('#menu li').hover(
                function() {
                    $(this).children('.sub').stop().slideToggle(350);
                },

                function() {
                    $(this).children('.sub').stop().delay(100).slideToggle(350);
                }
            );

            $('.sub li').hover(
                function() {
                    $(this).children('.subSub').stop().slideToggle(150);
                },

                function() {
                    $(this).children('.subSub').stop().delay(100).slideToggle(150);
                }
            );
        });

这是HTML。

<!DOCTYPE html>
    <div id="container">

        <div id="menu">

            <ul id="menuBar">

                <li class="mainLinks"><a href="#">Home</a></li>

                <li class="mainLinks"><a href="#">Products</a>

                    <ul id="sub00" class="sub">

                        <li><a href="#">Motherboards</a></li>

                        <li><a href="#">Cooling Options</a>

                            <ul id="sub01" class="subSub">

                                <li><a href="#">Fans</a></li>

                                <li><a href="#">Liquid Cooling</a></li>

                                <li><a href="#">Thermal Paste</a></li>      

                            </ul>

                        </li>

                        <li><a href="#">Graphics Cards</a></li>

                        <li><a href="#">Accessories</a>

                            <ul id="sub02" class="subSub">

                                <li><a href="#">Speakers</a></li>

                                <li><a href="#">Webcams</a></li>

                                <li><a href="#">Headphones</a></li>

                            </ul>

                        </li>

                    </ul>

                </li>

                <li class="mainLinks"><a href="#">Support</a></li>

                <li class="mainLinks"><a href="#">Community</a>

                    <ul id="sub03" class="sub">

                        <li><a href="#">Forums</a></li>

                        <li><a href="#">Profile</a></li>

                        <li><a href="#">Messaging</a></li>      

                    </ul>

                </li>

                <li class="mainLinks"><a href="#">Partners</a></li>     

            </ul>

            </div>

    </div>

我只需要子子菜单向右打开。他们使用类.subSub。感谢。

Answer 1

选中 Fiddle

ul.sub li {
position: relative;
}
.subSub {
position: absolute;
    background: black;
    left: 110px;
    top : 10px;
}

jQuery下拉菜单，子菜单在内部而不是侧面打开

1 个答案: