HTML表單 - 嵌套下拉菜單？

Question

我不知道這是什麼所謂的，所以這裏是什麼，我想在一個HTML表單做一個形象：

我想從下拉列表中選擇。當我向下滾動列表時，我想顯示從屬選擇，就像你在Windows的這個例子中做的一樣。並使用該最終選擇作爲表單的輸入。

可以這樣做嗎？

Answer 1

它可以完成，但很可能你必須使用第三方庫。 該菜單被稱爲上下文菜單。

結帳下面

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

庫如果你只想把輸入的形式則可能是最好使用一個簡單的下拉菜單。

Answer 2

我想你想實現這樣的東西。如果您只是搜索多級下拉導航菜單，您將在Google中獲得許多代碼。

ul 
 
{ 
 
\t list-style:none; 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
ul a 
 
{ 
 
\t display:block; 
 
\t color:#333; 
 
\t text-decoration:none; 
 
\t font-weight:700; 
 
\t font-size:12px; 
 
\t line-height:32px; 
 
\t padding:0 15px; 
 
} 
 

 
ul li 
 
{ 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
ul li.active 
 
{ 
 
\t background:#ddd 
 
} 
 

 
ul li:hover 
 
{ 
 
\t background:#f6f6f6 
 
} 
 

 
ul ul 
 
{ 
 
\t display:none; 
 
\t position:absolute; 
 
\t top:100%; 
 
\t left:0; 
 
\t background:#fff; 
 
\t padding:0 
 
} 
 

 
ul ul li 
 
{ 
 
\t float:none; 
 
\t width:200px 
 
} 
 

 
ul ul a 
 
{ 
 
\t line-height:120%; 
 
\t padding:10px 15px 
 
} 
 

 
ul ul ul 
 
{ 
 
\t top:0; 
 
\t left:100% 
 
} 
 

 
ul li:hover > ul 
 
{ 
 
\t 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