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

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        4年前关闭。
                                                                                            
                
        
试图很难弄清楚这一点。没有。

看一下：http://liveweave.com/VDqJTf

我只需要单击一下即可简单激活，因此在移动设备上也能很好地工作。

最佳答案

这是一个最小的示例，其中仅使用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>