HTML forms - nested dropdowns? - html

Question

I don't know what this is called, so here's an image of what I want to do in an HTML form:
I want to select from a dropdown. As I scroll down the list, I want to show subordinate selections, like you do in this example from Windows. And use that final selection as the input to the form.
Can this be done?

Answer 1

It can be done but most likely you'll have to use a third party library.
This menu is called context menu.
Checkout the library below
http://swisnl.github.io/jQuery-contextMenu/index.html
If you just want to put input in a form then probably it's better to use a simple dropdown.

Answer 2

I guess you want to implement something like this. You will get many codes in google if you simply search for a multilevel drop down navigation menu.
ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
}
ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
ul li.active
{
background:#ddd
}
ul li:hover
{
background:#f6f6f6
}
ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
ul ul li
{
float:none;
width:200px
}
ul ul a
{
line-height:120%;
padding:10px 15px
}
ul ul ul
{
top:0;
left:100%
}
ul li:hover > ul
{
display:block
}
<nav>
<ul>
<li class="active">Home</li>
<li>Menu 1 ►
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2 ►
<ul>
<li>Sub Sub Menu 1</li>
<li>Sub Sub Menu 2</li>
</ul>
</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 2 ►
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3</li>
</ul>
</nav>

Answer 3

Fair enough, the suggestion to use the jQuery contextMenu plugin really is not bad. It can handle submenu's for you without a problem and really makes defining the command's quite a lot easier than writing it yourself.
http://swisnl.github.io/jQuery-contextMenu/demo/sub-menus.html