創建多級下拉列表

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級列表。 如果我單擊“公司”，則應打開一個新的子菜單，其中顯示companyA companyB；如果我單擊“學校”，則應獲得另一個子菜單，其中顯示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

您將獲得所需的類似功能。