php - PHP 生成後に CSS を使用してメイン カテゴリの横にサブカテゴリを表示する

Question

1: データベースにカテゴリの階層テーブルがあります:
2: このテーブルを HTML に変換する PHP スクリプトを作成しました: http://pastie.org/4591869

3: HTML は次のようになります。

<script>
                    function toggleSubCategories(button) {
                        button = $(button);
                        button.parent().next().each(function() {
                            $(this).css('display') == 'none' ? $(this).css('display', 'inline') : $(this).css('display', 'none');
                        });
                    }
                </script>
                <div id="catlist">
                    <li>
                        <button onclick="toggleSubCategories(this)" class="btn btn-primary">Lots</button>
                    </li>
                    <ul style="display: inline; ">
                        <li>
                            <button onclick="toggleSubCategories(this)" class="btn btn-info">Town Lots</button>
                        </li>
                        <li>
                            <button onclick="toggleSubCategories(this)" class="btn btn-info">Bux Lots</button>
                        </li>
                        <li>
                            <button onclick="toggleSubCategories(this)" class="btn btn-info">Wild Lots</button>
                        </li>
                    </ul>
                    <li>
                        <button onclick="toggleSubCategories(this)" class="btn btn-primary">Items</button>
                    </li>
                    <ul>
                        <li>
                            <button onclick="toggleSubCategories(this)" class="btn btn-info">Blocks</button>
                        </li>
                        <li>
                            <button onclick="toggleSubCategories(this)" class="btn btn-info">Tools</button>
                        </li>
                        <ul>
                            <li>
                                <button onclick="toggleSubCategories(this)" class="btn btn-success">Enchanted</button>
                            </li>
                            <li>
                                <button onclick="toggleSubCategories(this)" class="btn btn-success">Normal</button>
                            </li>
                        </ul>
                    </ul>
                    <li>
                        <button onclick="toggleSubCategories(this)" class="btn btn-primary">Services</button>
                    </li>
                    <ul style="display: none; ">
                        <li>
                            <button onclick="toggleSubCategories(this)" class="btn btn-info">Trader Services</button>
                        </li>
                        <li>
                            <button onclick="toggleSubCategories(this)" class="btn btn-info">Constructor Services</button>
                        </li>
                        <li>
                            <button onclick="toggleSubCategories(this)" class="btn btn-info">Politician Services</button>
                        </li>
                    </ul>
                    <li>
                        <button onclick="toggleSubCategories(this)" class="btn btn-primary">Labour</button>
                    </li>
                </div>

4: 次の CSS ファイルもあります。

#catlist {
    list-style: none;
    display: block;
}

#catlist ul {
    list-style: inherit;
    display: none;
}

#catlist ul li {
    display: block;
    list-style: inherit;
}

#catlist button {
    width: 200px;
    height: 50px;
    margin: 5px;
    font-size: 2.5em;
    display: inline;
}

5: 現在、これは次のようになっています (最初のメイン カテゴリをクリックした後): 6: でも、このようにしたい:

私は何を間違っていますか？私は文字通りここで髪を引っ張っています。
CSS3、HTML5、JQuery、PHP、Twitter Bootstrap を使用しています。

Answer 1

の配置を変更する必要があり#catlist ulます。行う：

#catlist { position: relative; }
#catlist ul { position: absolute; top: 0; left: 220px; }

テストしていませんが、動作するはずです。次回、画像ではなくコードで jsfiddle を追加すると、正確なコードで遊んで問題を解決できます。

Answer 2

垂直CSSメニューを探していると思います。このページを見てください