javascript - マルチレベルのドロップダウン リストを作成する

Question

上の写真のように、html でマルチレベルのドロップダウン リストを作成したいと考えています。

    <select id ="dropdown">
    <option value="consolidated" id="consolidated">All Schools & Companies</option>
    <option value="company">Companies</option>
    <option value="school" id ="school">Schools</option>
    </select> 

これは私の基本レベル 1 リストです。「Companies」をクリックすると、companyA、companyB を示す新しいサブメニューが開き、「Schools」をクリックすると、schoolA、schoolB を示す別のサブメニューが表示されます。

Answer 1

完全な参照については、このフィドルを確認してください

<ul>
            <li><a href="#">SHARED HOSTING</a><span>WHM/Cpanel</span></li>
            <li><a href="#">EMAIL HOSTING</a><span>WEBMAIL</span></li>
            <li><a href="#">BLOG HOSTING</a><span>WHM/Cpanel</span></li>
            <li><a href="#">E-COMMERCE HOSTING</a><span>WHM/Cpanel</span></li>
            <li><a href="#">FILE STORAGE HOSTING</a><span>WHM/Cpanel</span></li>
            <li class="dropdown-submenu"><a href="#">RESELLER HOSTING</a><span>Private Nameservers</span>
                <ul class="dropdown-menu">
                    <li><a href="#">SHARED HOSTING</a><span>WHM/Cpanel</span></li>
                    <li><a href="#">EMAIL HOSTING</a><span>WEBMAIL</span></li>
                    <li><a href="#">BLOG HOSTING</a><span>WHM/Cpanel</span></li>
                    <li><a href="#">E-COMMERCE HOSTING</a><span>WHM/Cpanel</span></li>
                    <li><a href="#">FILE STORAGE HOSTING</a><span>WHM/Cpanel</span></li>
                    <li><a href="#">RESELLER HOSTING</a><span>Private Nameservers</span></li>
                </ul>
            </li>
        </ul>
    </li>
 </ul>

http://jsfiddle.net/SD8JL/3/

Answer 2

次のリンクをチェックしてください:--

http://www.jqueryscript.net/menu/Multi-Level-Drop-Down-Menu-with-Pure-CSS3-Minimal-Transparent-Menu.html

必要に応じて、同様のタイプの機能が得られます。