0

我创建了一个带有下拉菜单的 jQuery 菜单，但是当我将鼠标悬停在子菜单项上时，我希望它们向左打开。但是，我唯一可以的结果，或者它们在当前子菜单中打开，或者如果我添加一个 position: absolute 或 position: relative 并给它们一个 margin-left 或 left：它们是不可见的。

这是一个指向“ 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 类。谢谢。

4

1 回答 1

0

检查这个小提琴

ul.sub li {
position: relative;
}
.subSub {
position: absolute;
    background: black;
    left: 110px;
    top : 10px;
}
于 2013-08-18T13:48:14.820 回答