Create nested drop down list in HTML / CSS form

Question

I would like to create a logic such as displayed in this image for an HTML form.

What is the easiest way to do it? The server is using express and imports a layout file as a header replacement with css settings that do not include bootstrap. I am a complete beginner in front dev and I was told combining two css style sources in one HTML is possible but causes problems.

can I do this without JS/Jquery? If not, could you please provide a minimal example how to do it?

Welcome to Stack Overflow! It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with **your code** and explain what you have tried and why it did not work. — Paulie_D, Jun 10 '16 at 09:19
Thank you very much for downvoting me. I asked a question about a programming approach. Programming is not just about hard-coded problems, but also about, you know, approaches and different ways of doing things. The closest result to what I need was this here: http://stackoverflow.com/questions/7488968/html-css-nested-options-in-a-select-field and the problem there is that I have 15 categories and 15 subcategories, which would take too much space in one single drop-down-menu — Phil, Jun 10 '16 at 09:27
@Phil, we appreciate that programming is not just about hard-coded problems, but this site is. Perhaps you could re-phrase your question to better ask a specific problem that you're facing trying to do this. "What is the best way" is going to generate a lot of opinionated answers, and downvotes. :) — Kyle, Jun 10 '16 at 09:40
Jesus Christ, I can't believe what kind of questions I asked before I worked full time in Front-End — Phil, May 18 '18 at 13:07
@Phil I can't believe the word "menu" is completely absent in your question :) and yet you got a nice answer. I see "form" in the question title, and then I see a navigation menu in the accepted answer... Astonishing. — GrafiCode, Jun 07 '22 at 19:51

Tirthraj Barot · Accepted Answer · 2016-06-10T10:24:46.513

Yes it can be done using css and javascript.. here is the 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>

I didn't include any dynamic content but you will be able to do it through javascript using arrays.

@Phil You can run the code and notify me if I misinterpreted your question. — Tirthraj Barot, Jun 10 '16 at 09:34
Thank you. I wish this would be possible without bootstrap though, because including bootstrap in the header ruins the non-bootstrap-template of the site. I will try making an iframe just for the form and include the code you provided in the form. this approach has the disadvantage that the site in the iframe needs the user to be authorized though. — Phil, Jun 10 '16 at 10:18
@Phil I updated the answer with a dropdown menu which doesn't require any external resource.. Check that out... — Tirthraj Barot, Jun 10 '16 at 10:25

Create nested drop down list in HTML / CSS form

1 Answers1

Linked