create multi level dropdown list

Question

enter image description here

I want to create a multilevel dropdown list in html like in above pic.

    <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>

this is my base level 1 list. if I click on "Companies" then a new sub menu should open showing companyA companyB, If i click on "Schools" then i should get a another sub menu showing schoolA, schoolB.

Check this http://stackoverflow.com/questions/6857287/how-to-make-a-cascading-drop-down-list-in-php-using-jquery — vladislavn, Oct 30 '13 at 06:54
Check this out: http://stackoverflow.com/questions/5288792/how-to-indent-multiple-levels-of-select-optgroup-with-css — Mehul Tandale, Oct 30 '13 at 07:05

score 0 · Answer 1 · answered Oct 30 '13 at 06:59

For full reference check this fiddle

<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/

score 0 · Answer 2 · answered Oct 30 '13 at 07:02

0

Check it out following link:--

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

You will be get the similar type of functionality as you required.

answered Oct 30 '13 at 07:02

N.P. SINGH

303
1
4
15

create multi level dropdown list

2 Answers2