html - 需要帮助才能完成下拉菜单，以便仅在单击时激活。 (HTML 和 CSS)

Question

<分区>

Answer 1

这是一个最小的示例，它仅使用 CSS 和 HTML。

/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */

nav ul {display: block;}
nav > ul > li {display: inline-block; border: 1px solid #999; padding: 5px; position: relative;}
nav ul ul {position: absolute; left: 0; padding: 5px; border: 1px solid #999; margin-top: 5px; margin-left: -1px; width: 100px; background-color: #fff; display: none;}
nav ul input {display: none;}
nav ul ul li {display: block;}
nav ul input:checked + ul {display: block;}

<nav>
  <ul>
    <li>
      <label>
        Item 1
        <input type="radio" name="menu">
        <ul>
          <li><a href="#">Sub Item 1</a></li>
          <li><a href="#">Sub Item 2</a></li>
          <li><a href="#">Sub Item 3</a></li>
        </ul>
      </label>
    </li>
    <li>
      <label>
        Item 2
        <input type="radio" name="menu">
        <ul>
          <li><a href="#">Sub Item 1</a></li>
          <li><a href="#">Sub Item 2</a></li>
          <li><a href="#">Sub Item 3</a></li>
        </ul>
      </label>
    </li>
    <li>
      <label>
        Item 3
        <input type="radio" name="menu">
        <ul>
          <li><a href="#">Sub Item 1</a></li>
          <li><a href="#">Sub Item 2</a></li>
          <li><a href="#">Sub Item 3</a></li>
        </ul>
      </label>
    </li>
  </ul>
</nav>