以HTML/CSS格式創建嵌套的下拉列表

-2

我想創建一個邏輯，如在此圖像中顯示的HTML表單。以HTML/CSS格式創建嵌套的下拉列表

什麼是做到這一點的最簡單的方法？服務器正在使用express並導入佈局文件作爲頭部替換，其中不包括引導程序的css設置。我是一名完整的前端開發人員，我被告知在一個HTML中結合使用兩種CSS樣式源是可能的，但會導致問題。

我可以做到這一點沒有JS/JQuery的？如果沒有，請提供一個最簡單的例子來說明如何去做？

2016-06-10 Phil

歡迎來到Stack Overflow！預計你至少試圖爲自己編碼。堆棧溢出不是代碼寫入服務。我建議你做一些額外的研究，無論是通過谷歌或通過搜索，做一個嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

非常感謝您對我的支持。我問了一個關於編程方法的問題。編程不僅僅是硬編碼問題，還包括你知道的方法和不同的做事方式。最接近我需要的結果是這裏：http://stackoverflow.com/questions/7488968/html-css-nested-options-in-a-select-field和問題有我有15個類別和15子類別，這會在一個下拉菜單中佔用太多空間 – Phil

@Phil，我們明白編程不僅僅是硬編碼問題，而是這個網站。也許你可以重新提出你的問題，以更好地問你正在嘗試這樣做的具體問題。「什麼是最好的方式」將會產生許多有見地的答案，並且會降低效果。 :) – Kyle

是的，這是可以做到使用CSS和JavaScript ..這裏是代碼..

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    background: #1bc2a2; 
 
} 
 

 
ul li { 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    background: #1bc2a2; 
 
} 
 
li ul { display: none; } 
 

 
ul li a { 
 
    display: block; 
 
    padding: 1em; 
 
    text-decoration: none; 
 
    white-space: nowrap; 
 
    color: #fff; 
 
} 
 

 
ul li a:hover { background: #2c3e50; } 
 
li:hover > ul { 
 
    display: block; 
 
    position: absolute; 
 
} 
 

 
li:hover li { float: none; } 
 

 
li:hover a { background: #1bc2a2; } 
 

 
li:hover li a:hover { background: #2c3e50; } 
 

 
.main-navigation li ul li { border-top: 0; } 
 
ul ul ul { 
 
    left: 100%; 
 
    top: 0; 
 
} 
 
ul:before, 
 
ul:after { 
 
    content: " "; /* 1 */ 
 
    display: table; /* 2 */ 
 
} 
 

 
ul:after { clear: both; }

<ul class="main-navigation"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Front End Design</a> 
 
    <ul> 
 
     <li><a href="#">HTML</a></li> 
 
     <li><a href="#">CSS</a> 
 
     <ul> 
 
      <li><a href="#">Resets</a></li> 
 
      <li><a href="#">Grids</a></li> 
 
      <li><a href="#">Frameworks</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">JavaScript</a> 
 
     <ul> 
 
      <li><a href="#">Ajax</a></li> 
 
      <li><a href="#">jQuery</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">WordPress Development</a> 
 
    <ul> 
 
     <li><a href="#">Themes</a></li> 
 
     <li><a href="#">Plugins</a></li> 
 
     <li><a href="#">Custom Post Types</a> 
 
     <ul> 
 
      <li><a href="#">Portfolios</a></li> 
 
      <li><a href="#">Testimonials</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Options</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">About Us</a></li> 
 
</ul>

我不包括任何動態的內容，但是，你將能夠做到這一點通過JavaScript使用數組。

來源

2016-06-10 09:33:10

@Phil如果我誤解了你的問題，你可以運行代碼並通知我。 –

謝謝。我希望這可能沒有bootstrap，因爲在標題中包含bootstrap會丟棄站點的非bootstrap模板。我會嘗試爲表單創建一個iframe，幷包含您在表單中提供的代碼。這種方法的缺點是iframe中的站點需要用戶授權。 – Phil

@Phil我更新了一個不需要任何外部資源的下拉菜單的答案..檢查出來... –

以HTML/CSS格式創建嵌套的下拉列表

回答

相關問題