1

JQuery UI メニューのレイアウトを垂直から水平に変更する方法を知りたいです。

これを試してみましたが、メニューバーのメインリンクでのみ機能し、サブメニューのリンクでは機能しませんでした.

「Delphi」の下にある項目は、Delphi のサブ項目であるため、垂直方向にドロップダウンするのではなく、水平方向に表示され続けることを意味します。

<style>   
    .ui-menu:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    } 

    .ui-menu .ui-menu-item {
        display: inline-block;
        float: left;
        margin: 0;
        padding: 0;
        width: auto;
    }
</style>

                <nav>
                    <ul id="ui-menu" class="ui-menu">
                        <li><a href="#">Link one</a></li>
                        <li><a href="#">Link two</a></li>
                        <li><a href="#">Link three</a></li>
                        <li><a href="#">Link four</a></li>
                        <li>
                            <a href="#">Delphi</a>
                            <ul>
                                <li><a href="#">Ada</a></li>
                                <li><a href="#">Saarland</a></li>
                                <li><a href="#">Salzburg</a></li>
                            </ul>
                        </li>

                    </ul>
                </nav>


    $(function () {
        $("#ui-menu").menu();
    });

編集

これは、これまでに達成したことのスクリーンショットであり、まだ行う必要があることは次のとおりです。

ここに画像の説明を入力

私が間違っていることを教えてください。

どうもありがとう。

4

2 に答える 2

-1

問題を解決するこのCSS NAVジェネレーターを見つけました（一種の..）：

http://cssmenumaker.com/builder/1444006

于 2014-02-09T12:27:52.830 に答える