HTML表单 - 嵌套下拉列表？

Question

我不知道这叫什么，所以这里是我想用HTML格式做的图片：

我想从下拉列表中进行选择。当我向下滚动列表时，我想显示从属选择，就像你在Windows中的这个例子中所做的那样。并使用最终选择作为表单的输入。

可以这样做吗？

Answer 1

可以这样做但很可能你必须使用第三方库。 此菜单称为上下文菜单。

查看下面的图书馆

http://swisnl.github.io/jQuery-contextMenu/index.html

如果您只想将输入放在表单中，那么使用简单的下拉列表可能会更好。

Answer 2

我想你想要实现这样的东西。如果您只是搜索多级下拉导航菜单，您将在谷歌中获得许多代码。

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"><a href="#">Home</a></li>
  <li><a href="#">Menu 1 &#9658;</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2 &#9658;</a>
        <ul>
          <li><a href="#">Sub Sub Menu 1</a></li>
          <li><a href="#">Sub Sub Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2 &#9658;</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a></li>
</ul>
</nav>

Answer 3

很公道，使用jQuery contextMenu插件的建议确实不错。它可以毫无问题地为您处理子菜单，并且真正使定义命令比自己编写命令容易得多。

http://swisnl.github.io/jQuery-contextMenu/demo/sub-menus.html