悬停在锚标签上以使未命名的列表可见〜不起作用

debugcn 发表于 Dev

利桑德罗

将鼠标悬停在链接上时出现问题。无序列表 .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 有什么问题？任何帮助将不胜感激。

利桑德罗

这已经解决了。感谢你的帮助。我非常感谢。

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

这是它的外观。

<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=""> Waduhek <i class= "glyphicon glyphicon-triangle- 
bottom"></i>
    <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>   
    </a>
</li>


</ul>
</div>   

.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;
}

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。