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 级列表。如果我点击“公司”，那么应该打开一个新的子菜单，显示公司 A 公司 B，如果我点击“学校”，那么我应该得到另一个子菜单，显示学校 A、学校 B。

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

您将获得所需的类似功能。