0

ドロップダウンを使用して jQuery メニューを作成しましたが、subMenu 項目にカーソルを合わせると、左に開くようにします。ただし、現在のサブメニューで開くか、 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