html - 我如何做到这一点，当菜单按钮悬停在不改变位置的情况下显示 div : absolute part?

Question

我想在悬停在 .but 上时显示 .navdrop。这是我的 CSS:

.but {
 background-color: blue;
 padding: 5px;
 float: left;
}

.but a:hover {
  background-color: skyblue;
}

.but a:hover .navdrop {
display: block !important;
}

 .navdrop {
text-align: left;
position: absolute;
right: auto;
top: 21.5rem;
display: none;
}

.navdrop ul {
list-style-type: none;
background-color: skyblue;
padding: 10px;
}

.navdrop li {
 padding: 2px 10px 2px 2px;
 background-color: blue;
}

li .navlinkd {
 display: block;
 text-decoration: none;
 color: black;
}

.navlinkd:hover {
 box-shadow: 8px 5px 4px rgba(124, 112, 79, 0.7);
 background-color: skyblue;
}

.navlinkd:active {
 box-shadow: none;
 background-color: #3c94d1;

@media screen and (min-width: 1030px) {
 span {
display: none;
 }
}

我不想 .but 链接到任何地方，但我是新手，没有一个可用的解决方案对我有用。这是我的 HTML 供引用。我想知道这是否与 display: none 不能逆转这一事实有关，在这种情况下，我该如何让它显示？

<div class="liststyle">
  <ul>
    <li class="but"><a href>Menu &#8595;</a></li>
      <div class="navdrop">
        <ul>
            <li><a class="navlinkd" href="Intro.html">Intro</a></li>
            <li><a class="navlinkd" href="a.html">a</a></li>
            <li><a class="navlinkd" href="b.html">b</a></li>
            <li><a class="navlinkd" href="c.html">c</a></li>
            <li><a class="navlinkd" href="d.html">d</a></li>
            <li><a class="navlinkd" href="e.html">e</a></li>
            <li><a class="navlinkd" href="f.html">f</a></li>
            <li><a class="navlinkd" href="g.html">g</a></li>
            <li><a class="navlinkd" href="h.html">h</a></li>
        </ul>
    </div>
  <ul>
</div>

Answer 1

首先，一些旁注:

• 你有一个关闭 <ul>而不是 </ul> .
• 媒体查询不能在选择器内；您似乎错过了 .navlinkd:active 中的右括号.

我已经在示例中更正了这两点。

其次，还有 no concept of a parent selector 在 CSS 中，这意味着您无法更改 .navdrop 的显示通过定位 <a> .but 的 child . 但是，您可以通过将鼠标悬停在 .but 上来实现您的目标。本身，并利用 adjacent sibling selector ( + ) :

.but:hover + .navdrop {
  display: block;
}

请注意，我已经删除了 !important从上面，因为没有必要，和!important拥有最高级别的 specificity (这意味着它只能作为最后的手段使用)。

此外，如果没有 JavaScript，在鼠标悬停时切换菜单的可见性基本上毫无意义，因为您永远无法真正点击任何链接。

这可以从以下方面看出:

.but {
  background-color: blue;
  padding: 5px;
  float: left;
}

.but a:hover {
  background-color: skyblue;
}

.but:hover ~ .navdrop {
  display: block;
}

.navdrop {
  text-align: left;
  position: absolute;
  right: auto;
  /*top: 21.5rem;*/
  top: 3.5rem;
  display: none;
}

.navdrop ul {
  list-style-type: none;
  background-color: skyblue;
  padding: 10px;
}

.navdrop li {
  padding: 2px 10px 2px 2px;
  background-color: blue;
}

li .navlinkd {
  display: block;
  text-decoration: none;
  color: black;
}

.navlinkd:hover {
  box-shadow: 8px 5px 4px rgba(124, 112, 79, 0.7);
  background-color: skyblue;
}

.navlinkd:active {
  box-shadow: none;
  background-color: #3c94d1;
}

@media screen and (min-width: 1030px) {
  span {
    display: none;
  }
}

<div class="liststyle">
  <ul>
    <li class="but"><a href>Menu &#8595;</a></li>
    <div class="navdrop">
      <ul>
        <li><a class="navlinkd" href="Intro.html">Intro</a></li>
        <li><a class="navlinkd" href="a.html">a</a></li>
        <li><a class="navlinkd" href="b.html">b</a></li>
        <li><a class="navlinkd" href="c.html">c</a></li>
        <li><a class="navlinkd" href="d.html">d</a></li>
        <li><a class="navlinkd" href="e.html">e</a></li>
        <li><a class="navlinkd" href="f.html">f</a></li>
        <li><a class="navlinkd" href="g.html">g</a></li>
        <li><a class="navlinkd" href="h.html">h</a></li>
      </ul>
    </div>
  </ul>
</div>

请注意，我已经修改了 top在 .navdrop对于这个例子，这样菜单将在没有任何滚动的情况下显示。

考虑到无法点击链接，您可能需要使用 JavaScript 在悬停时打开相关菜单，并延迟关闭。不幸的是，这不能用 CSS 完成。

希望对您有所帮助! :)