我如何 select 在 css 中使项目出现在悬停状态在整个页面（大型菜单）

Question

如何select在CSS中使所有列表项仅在悬停状态和四列宽度960px中出现；（见上图）。在这种情况下，我不知道要 select 哪个标签，请参阅下面的 HTML。

<div class="categories">
  <li>
    <a href="#">All categories</a>
    <ul class="sub-menu">
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
    </ul>
  </li>
</div>

Answer 1

你可以简单地使用这个：

将 id="sub-menu" 更改为 class="sub-menu"，因为 id 不能重复。
给出以下首字母 CSS: .sub-menu {display: none;}.
不要在 <div> 中嵌套 <li>。将其更改为 <ul>

工作Fiddle

.categories li .sub-menu {display: none;}
.categories li:hover .sub-menu {display: block;}

<ul class="categories">
  <li>
    <a href="#">All categories</a>
    <ul class="sub-menu">
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
    </ul>
  </li>
</ul>

Answer 2

在您的 class 类别中输入以下行：

visibility: hidden;

并在您的 CSS 代码中创建 class：

.categories:hover{
visibility:visible;
}

这将使它隐藏但仍然占用 space。有用的链接：Hover Visibility。如果你不想使用 space，你可以尝试将其设置为静态。我希望这有效。

我如何 select 在 css 中使项目出现在悬停状态在整个页面（大型菜单）

how do I select in css so the items appears in hover state In entire page(mega menu)

css

hover

megamenu

我如何 select 在 css 中使项目出现在悬停状态 在整个页面（大型菜单）

how do I select in css so the items appears in hover state In entire page(mega menu)

css

hover

megamenu

我如何 select 在 css 中使项目出现在悬停状态在整个页面（大型菜单）