Erstellen Sie verschachtelte Dropdown-Liste in HTML/CSS-Formular

Question

Ich möchte eine Logik wie in diesem Bild für ein HTML-Formular angezeigt erstellen.

Was ist der einfachste Weg, es zu tun? Der Server verwendet Express und importiert eine Layoutdatei als Headerersatz mit CSS-Einstellungen, die kein Bootstrap enthalten. Ich bin ein kompletter Anfänger in Front-Dev und mir wurde gesagt, dass das Kombinieren von zwei CSS-Quellen in einem HTML möglich ist, aber Probleme verursacht.

kann ich dies ohne JS/Jquery tun? Wenn nicht, könnten Sie bitte ein minimales Beispiel dafür geben?

Answer 1

Ja, es kann .. hier mit CSS und Javascript getan werden, ist der Code ..

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>

ich dynamische Inhalte nicht enthalten, aber Sie werden es tun können durch Javascript mit Arrays.