html - 下拉菜单在网站上不起作用（css 显示标签）

Question

我已经为此工作了很长一段时间，但似乎无法找到我的下拉菜单不起作用的原因。搜索了很多在线论坛和询问朋友后，我没有答案。我只是想让下拉菜单工作。我似乎无法让 .dropdown_trigger 类使 .dropdown 类隐藏或重新出现。任何帮助将不胜感激。下面链接的页面。

谢谢，
亚历克斯

索引页面  CSS 文件

Answer 1

通过检查“索引页面”链接中提供的 html 页面，只有一个具有“下拉”类的元素，并且它是空的。目前尚不清楚您的代码试图显示或隐藏什么。

<div class="dropdown"></div>

“dropdown_trigger”类位于表头元素中：

<th>
  <a href="AArehartProjects.html" class="dropdown_trigger">PROJECTS</a>
</th>

通过检查，似乎没有任何 javascript 来触发任何行为。它不会显示在 Chrome Inspector 的 Source 中。通常，这将通过 JS 使用 .show() 或 .hide() 来完成，例如，如果您有 jQuery（还有其他方法）。或者你想在没有 JS 的情况下创建它？您是否尝试仅使用 CSS 创建下拉菜单？

如果是这样，请查看本教程：

• https://css-tricks.com/solved-with-css-dropdown-menus/

关键部分在这里：

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

通过创建 CSS 规则来更改可见性，可以显示下拉菜单。但是，您提供的当前链接页面中似乎没有任何 HTML 内容可显示。那div是空的。