以 HTML/CSS 形式创建嵌套下拉列表 [英] Create nested drop down list in HTML / CSS form

问题描述

我想为 HTML 表单创建一个逻辑，例如显示在此图像中.

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

最简单的方法是什么?服务器正在使用 express 并导入一个布局文件作为头文件替换，css 设置不包含引导程序.我是前端开发的完全初学者，有人告诉我在一个 HTML 中组合两个 css 样式源是可能的，但会导致问题.

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.

我可以在没有 JS/Jquery 的情况下做到这一点吗?如果没有，您能否提供一个如何操作的最小示例?

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

推荐答案

是的，可以使用 css 和 javascript 来完成..这是代码..

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>

我没有包含任何动态内容，但您可以通过 javascript 使用数组来实现.

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

这篇关于以 HTML/CSS 形式创建嵌套下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！