I using drop down list to show menus.however there are some menus having submenus like

-Movies 
       -In Cinemas now
       -Coming Soon

I succeed to write code for simple menus Where i have taken one drop down list and added some items as shown in code.Some items contains sub-item now question is how to add these sub-items in drop down list.

     <select id="cd-dropdown" class="cd-select">
                                <option value="1" >Home</option>
                                <option value="2" >Movies</option>
                                <option value="3" >T.V. Shows</option>
                                <option value="4" >Photos</option>
                                <option value="4" >Site Help</option>

                            </select>

but i am unable to add sub-items to the main items.please give any solution

I using drop down list to show menus.however there are some menus having submenus like

-Movies 
       -In Cinemas now
       -Coming Soon

I succeed to write code for simple menus Where i have taken one drop down list and added some items as shown in code.Some items contains sub-item now question is how to add these sub-items in drop down list.

     <select id="cd-dropdown" class="cd-select">
                                <option value="1" >Home</option>
                                <option value="2" >Movies</option>
                                <option value="3" >T.V. Shows</option>
                                <option value="4" >Photos</option>
                                <option value="4" >Site Help</option>

                            </select>

but i am unable to add sub-items to the main items.please give any solution

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 24, 2015 at 14:56 GreyRoofPigeon 18.1k55 gold badges3939 silver badges6060 bronze badges asked Sep 24, 2015 at 14:51 DhirajDhiraj 91022 gold badges1212 silver badges2626 bronze badges 3

• Take a look at JQuery-UI. There's a dropdown box that allows sub-items in it. – Johnny Bones Commented Sep 24, 2015 at 14:54
• Why not use the jQuery-UI menu widget? – anmarti Commented Sep 24, 2015 at 14:56
• Or this: callmenick./post/slide-down-menu-with-jquery-and-css – Johnny Bones Commented Sep 24, 2015 at 14:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

If its in a form you should use optgroup.

 <select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select> 

From: http://www.w3schools./tags/tag_optgroup.asp

You can use Bootstrap , for more details you can see the documentation here below the topic
Sub menus on dropdowns:

http://getbootstrap./2.3.2/ponents.html

its just do that

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>