html - 使列表元素出现在同级悬停上

Question

我正在尝试在 Joomla CSS 中创建一个纯 CSS 响应式导航栏，到目前为止，该导航栏适用于大屏幕，适用于小屏幕。但是，当鼠标悬停在生成的菜单图标上时，我无法让菜单中的所有其他列表元素出现。我已经玩了两个小时来操纵 >、~ 和 + 选择器，但它似乎不起作用。

重申/简化，我希望其他 li 元素在悬停在显示的图标上时出现在小屏幕版本中。这可能作为纯 CSS 解决方案吗？

当前的实现如下。

网站:http://2017.grooverjazz.nl/

HTML 标记:

<header>
     <jdoc:include type="modules" name="navigationbar" style="xhtml" />
     <a href="#" class="collapseicon">&#9776;</a>
</header>

当前导航栏CSS:

header {
  background: #12171d;
  border-bottom: 1px solid #333333;
  opacity: 0.9;
  position: fixed;
  text-align: center;
  font-size: 150%;
  width: 100%;
  top: 0;
  z-index: 999;
}

header a:hover {
  color: #da8203;
  text-decoration: none;
}

header ul {
  list-style: none;
  margin: 0;
  padding: 0 8vw;
}

header li:first-child {
  float: left;
  font-weight: 700;
}

header li:not(:first-child) {
  display: none;
}

header li a {
  border-bottom: 3px solid transparent;
  color: #cccccc;
  padding: .7em .7em;
  margin-bottom: -1px;
}

.collapseicon {
  padding: 0 9vw 0 0;
  float: right;
}

.collapseicon:hover > header li {
  display: inline!important;
}

@media (min-width: 950px) {
  header li a:hover {
    border-color: #da8203;
  }

  header li {
    display: inline!important;
  }

  header li a {
    display: inline-block;
  }

  header li:last-child {
    float: right;
  }

  .collapseicon {
    display: none;
  }
}

Answer 1

还没有一个previous sibling selector，所以你必须改变icon和moduletable的顺序:

<header>
  <a href="#" class="collapseicon">☰</a>
  <div class="moduletable">
    <ul class="nav menu">
      <!-- ... -->
    </ul>
  </div> 
</header>

然后选择隐藏的<li>像这样悬停在图标上的元素:

.collapseicon:hover + .moduletable li {
  display: block;
}

作为相邻兄弟 (+) 的替代方案，您还可以使用通用兄弟 (~) 选择器。