菜单焦点或活动未按预期响应

Question

使用纯CSS，我有一个菜单图像，当时：悬停，背景颜色按预期变化。当用户点击时，弹出一个菜单，现在，该初始菜单图像应该是活动的。但是，即使我的样式设置为：active或：focus。

，也不会保留所需的颜色

悬停时的图像：

当光标移动到该图像和菜单项时，该背景颜色不会保留在预期的封面上。那张图片：

我的html和css代码是：

#menu {
  position: relative;
}
#menu_img:hover,
#menu_img:active,
#menu_img:focus {
  background-color: #008272;
  cursor: pointer;
}
#menu_items {
  position: absolute;
  top: 0%;
  opacity: 0;
  transition: all 0.5s;
  display: none;
  background-color: #002F33;
  color: #ffffff;
  height: 600px;
  width: 18%;
  z-index: 2;
  left: 0px;
}
#menu_items > a {
  font-size: 18px;
  color: #ffffff;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-left: 20px;
}
#menu_items > a:hover {
  text-decoration: none;
}
#menu_items.menu_items_toggle {
  opacity: 1;
  top: 100%;
  display: inline-block;
}

<div id="menu" style="background-color: #002F33; height:50px;">
  <span id="span_img_container" class="navIcon" style="width: 50px;"><img id="menu_img" src="assets/images/icon_hamburger.png"></span>
  <div id="menu_items">
    <a href="https://www.moneyball.ms/">Moneyball Website</a>
    <br>
    <a href="https://www.tools.moneyball.ms/">Moneyball Tool</a>
    <br>
    <a href="https://msit.microsoftstream.com/channel/8a4a7740-855b-4c52-912c-c97fb714a0a6">Moneyball Stream Channel</a> 
    <br>
  </div>
  <span style="color: #ffffff; font-size: 22px; padding-left:15px; padding-top: 26px; position: relative; top: 5px; left: -5px;">Moneyball Tool</span>>
</div>

有关于此的任何想法吗？非常感谢！

Answer 1

我建议这是因为图标在menu_items之外。你可以尝试这样的事情：

nav {
  background: #333;
  color: white;
  min-height: 2.75em;
  position: relative;
}
nav h1 {
  line-height: 2.75rem;
  margin: 0 0 0 3.5rem;
}
nav menu {
  line-height: 2.75;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 2.75em;
}
nav menu:before {
  box-shadow: 11px 0 0 -10px rgba(255, 255, 255, 0.6);
  content: "☰";
  display: block;
  line-height: 2.75;
  text-align: center;
  transition: backround-color 200ms;
  width: 2.75em;
}
nav menu li {
  background: #333;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  padding: 0 1em;
  transition: max-height 200ms;
}
nav menu li:hover {
  background-color: black;
}
nav menu:hover {
  width: auto;
}
nav menu:hover:before {
  background-color: green;
  box-shadow: none;
}
nav menu:hover li {
  max-height: 2.75em;
}

<nav>
  <menu>
    <li>
      <a>First menu link</a>
    </li>
    <li>
      <a>Second menu link</a>
    </li>
    <li>
      <a>Third menu link</a>
    </li>
    <li>
      <a>Fourth menu link</a>
    </li>
  </menu>
  <h1>Page title</h1>
</nav>