创建多级下拉列表

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级列表。如果我点击＆＃34;公司＆＃34;然后应该打开一个新的子菜单显示companyA companyB， 如果我点击＆＃34;学校＆＃34;然后我应该得到另一个显示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

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