无法使下拉悬停工作

Question

我正在尝试制作一个从图像中删除的下拉菜单，但我似乎无法使其工作。我应该如何定位悬停？因为我正在尝试的一切都不起作用。我如何尝试启动悬停效果显示在 CSS 的末尾。

.area-left {
  float: left;
}

.menu-icon {
  width: 28px;
  display: inline-block;
  vertical-align: middle;
  margin-top: 5px;
}

.menu-icon hr {
  border: 2px solid #A5CF4C;
  border-radius: 100px;
  margin-top: 3px;
  margin-bottom: 4px;
  margin-right: 5px;
  margin-left: 3px;
}

.area-left .menu li:hover {
  background-color: rgba(165, 207, 76, 0.4);
}

.logo img {
  vertical-align: middle;
  margin-top: 2px;
}

.sub-menu ul {
  background-color: rgba(255, 255, 255, 0.8);
}

.sub-menu li {
  border: 1px solid green;
  padding: 0px 5px;
}

.sub-menu .menu li:first-child {
  margin-top: 3px;
}

.sub-menu ul li {
  display: none;
}

.logo img:hover .sub-menu ul li {
  display: block;
}

<div class="area-left">
  <ul id="htc-menu" class="parent-menu">
    <li class="logo ico-container">
      <div class="menu-icon">
        <hr/>
        <hr/>
        <hr/>
      </div><img src="images/logo.png" alt="HTC Logo"></li>
    <li class="sub-menu">
      <ul class="menu">
        <li><a href="http://www.htc.com/us/smartphones-learn/">smartphones</a></li>
        <li><a href="http://www.htc.com/us/accessories/">accessories</a></li>
        <li><a href="https://www.vive.com/us/">virtual reality</a></li>
        <li><a href="http://www.htc.com/us/fitness/ua-healthbox/">fitness</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

您正试图以 .logo 的子级身份访问 .sub-menu，尽管它们是彼此的兄弟姐妹。

试试：

.logo:hover + .sub-menu ul li  {
    display: block;
}

或者只是：

#htc-menu:hover .sub-menu ul li  {
    display: block;
}

Answer 2

试试这个:)

我故意不使用相邻的 CSS 选择器，因为一旦您的鼠标移开菜单图标，菜单就会再次消失，使其无用。因此，您需要定位父元素的悬停状态，以便在鼠标从徽标移动到刚刚出现的菜单时菜单保持可见。

.area-left {
  float: left;
}

.menu-icon {
  width: 28px;
  display: inline-block;
  vertical-align: middle;
  margin-top: 5px;
}

.menu-icon hr {
  border: 2px solid #A5CF4C;
  border-radius: 100px;
  margin-top: 3px;
  margin-bottom: 4px;
  margin-right: 5px;
  margin-left: 3px;
}

.area-left .menu li:hover {
  background-color: rgba(165, 207, 76, 0.4);
}

.logo img {
  vertical-align: middle;
  margin-top: 2px;
}

.sub-menu ul {
  background-color: rgba(255, 255, 255, 0.8);
}

.sub-menu li {
  border: 1px solid green;
  padding: 0px 5px;
}

.sub-menu .menu li:first-child {
  margin-top: 3px;
}

.sub-menu ul li {
  display: none;
}

.logo img:hover .sub-menu ul li {
  display: block;
}


/* Tessa's Changes */

#htc-menu {
  list-style: none;
}

#htc-menu:hover li.sub-menu ul.menu li {
  display: block;
}

<div class="area-left">
  <ul id="htc-menu" class="parent-menu">
    <li class="logo ico-container">
      <div class="menu-icon">
        <hr/>
        <hr/>
        <hr/>
      </div><img src="images/logo.png" alt="HTC Logo">
    </li>
    <li class="sub-menu">
      <ul class="menu">
        <li><a href="http://www.htc.com/us/smartphones-learn/">smartphones</a></li>
        <li><a href="http://www.htc.com/us/accessories/">accessories</a></li>
        <li><a href="https://www.vive.com/us/">virtual reality</a></li>
        <li><a href="http://www.htc.com/us/fitness/ua-healthbox/">fitness</a></li>
      </ul>
    </li>
  </ul>
</div>