将鼠标悬停在锚标记上，以使可见的未编排列表不起作用

Question

将鼠标悬停在链接上时出现问题。未显示的列表.shownav不显示。我不确定在CSS中是否声明了正确的选择器。请帮忙。

.shownav {
  display: none;
  position: fixed;
  padding: 20px;
  border: 2px solid #FFB600;
  background: #1a1a1a;
  right: 20px;
  top: 45px;
  min-width: 20%;
  border-radius: 20px 0 15px 10px;
  z-index: 99999;
}

.shownav li {
  text-align: center;
  width: 100%;
  padding: 10px 0;
  margin: 0;
}

.promainlink:hover {
  text-decoration: none;
  color: #FFB600;
}

.promainlink:hover .shownav {
  display: block;
}

<div class="mainnav">
  <ul class="mainul">
    <li>
      <span class="promainimg"><img src = "./images/profilepic.jpg" alt="" 
    style="border-radius:17px;height=26px;width:26px"></span>
      <a class="promainlink" href=""> User <i class= "glyphicon glyphicon- 
    triangle-bottom"></i></a>
    </li>

    <ul class="shownav">
      <li><a class="navlinks" href="">View my Profile</a></li>
      <li><a class="navlinks" href="">Account Settings</a></li>
      <li><a class="navlinks" href="">Sign Out</a></li>
    </ul>
  </ul>
</div>

谁能告诉我CSS怎么了？任何帮助将不胜感激。

Answer 1

此问题已解决。感谢你的帮助。我非常感谢。

我通过重新排列html本身就解决了ul不显示的问题。我只是将无序列表.shownav放在锚标记中。我想我必须回到基础知识，并了解w3school中的CSS选择器参考。

这是它的外观。

if profile.user&.user_application...

Answer 2

您应该尝试这个

.mainul > li:hover + ul.shownav { display:block; }

Answer 3

您应该了解CSS Selector

https://www.w3schools.com/cssref/css_selectors.asp

.shownav {
  display: none;
  position: fixed;
  padding: 20px;
  border: 2px solid #FFB600;
  background: #1a1a1a;
  right: 20px;
  top: 45px;
  min-width: 20%;
  border-radius: 20px 0 15px 10px;
  z-index: 99999;
}

.shownav li {
  text-align: center;
  width: 100%;
  padding: 10px 0;
  margin: 0;
}

.promainlink:hover {
  text-decoration: none;
  color: #FFB600;
}

.promainlink:hover + .shownav {
  display: block;
}

<div class="mainnav">
  <ul class="mainul">
    <li>
      <span class="promainimg"><img src = "./images/profilepic.jpg" alt="" 
    style="border-radius:17px;height=26px;width:26px"></span>
      <a class="promainlink" href=""> User <i class= "glyphicon glyphicon- 
    triangle-bottom"></i></a>
      <ul class="shownav">
        <li><a class="navlinks" href="">View my Profile</a></li>
        <li><a class="navlinks" href="">Account Settings</a></li>
        <li><a class="navlinks" href="">Sign Out</a></li>
      </ul>
    </li>
  </ul>
</div>