How to add sub item in drop down list

Question

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

Answer 1

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

http://getbootstrap.com/2.3.2/components.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>

Answer 2

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.com/tags/tag_optgroup.asp