文章/答案/技术大牛

发布

社区首页 >问答首页 >尝试使用基本CSS创建基本下拉菜单，单击时不会打开

问尝试使用基本CSS创建基本下拉菜单，单击时不会打开
EN

Stack Overflow用户

提问于 2022-01-20 15:15:33

回答 1查看 34关注 0票数 1

到目前为止，我已经尝试使用以下代码：

CSS代码：

/*global*/
html,
body {
  width: 100;
  margin: 10;
  padding: 10;
  font-family: Avenir, sans-serif;
}

/*functions*/

.multi-level,
.item ul,
.nav input[type="checkbox"] {
  display: none;
}
#menu:checked ~ .multi-level,
.item input:checked ~ ul {
  display: block;
}

HTML：

<body>
  <p style="font-family: 'Avenir'; text-align: center">
    "What is this website about?" Info about select Macs and frequently asked
    questions.
  </p>

  <div class="nav">
    <input type="checkbox" id="menu" />
    <label for="menu">&#9776</label>
  </div>

  <div class="multi-level">
    <div class="item">
      <input type="checkbox" id="A" />
      <label for="A">Mac Mini</label>

      <ul>
        <li><a href="#">2005-2006 (PPC)</a></li>
        <li><a href="#">2006-2010 (Polycarbonate Mini*)</a></li>
        <li><a href="#">2010-2018 (Aluminium Mini*)</a></li>
        <li><a href="#">2020-Present (M1 Mini)</a></li>
      </ul>
    </div>
  </div>
</body>

下拉菜单不起作用是因为某种原因，我尝试过添加visibility: visible;，而visibility: show;似乎什么也不做。

我试过使用Firefox和Safari，它们都不能工作，这是否是与浏览器相关的问题呢？

Note：我正在研究这两种语言的最新版本。

css

drop-down-menu

dropdown

html

回答 1

Stack Overflow用户

发布于 2022-01-20 15:30:31

您的问题是，这个选择器没有选择任何内容：

#menu:checked ~ .multi-level {
    display: block;
}

您的div.multi-level不是#menu的兄弟，而是.nav的兄弟。但是there's no CSS parent selector，所以用纯CSS解决方案真正解决这个问题的唯一方法是重构你的。您可以摆脱div.nav，也可以在label for="menu"或其他对您有用的东西之后将div.multi-level移动到div.nav中。

或者，您可以使用JavaScript解决方案在一个或多个元素上切换类。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70788735

复制

相似问题

问尝试使用基本CSS创建基本下拉菜单，单击时不会打开
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试使用基本CSS创建基本下拉菜单，单击时不会打开EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试使用基本CSS创建基本下拉菜单，单击时不会打开
EN