当我将鼠标从菜单上的锚标记链接移动时，我的下拉菜单不显示

Question

当我将鼠标从锚标记上移开时，如何才能使我的下拉菜单可用？目前，如果我访问下拉菜单，它会在我将鼠标放入访问任何内容之前消失。

SO 希望我添加更多文字，但我没有什么比我已经拥有的要多说的了.. 看起来您的帖子主要是代码；请添加更多详细信息。

<nav class="navigation">
        <ul class="list">
            <li class="item">
                <a class="link" href="#">Natural Gas & LPG</a>
                <div class="sub-menu-container">hello
                </div>
            </li>
            <li class="item">
                <a class="link" href="#">Plumbing Supplies</a>
            </li>
            <li class="item">
                <a class="link" href="#">Pipe, Tube & Fittings</a>
            </li>
            <li class="item">
                <a class="link" href="#">Heating & Ventilation</a>
            </li>
            <li class="item">
                <a class="link" href="#">Testing Equipment</a>
            </li>
            <li class="item">
                <a class="link" href="#">Tools & Equipment</a>
            </li>
            <li class="item single-item">
                <a class="link" href="#">Electrical</a>
            </li>
            <li class="item single-item">
                <a class="link" href="#">Air Conditioning</a>
            </li>
            <li class="item single-item">
                <a class="link" href="#">Our Brands</a>
            </li>
        </ul>
    </nav>

下面是CSS

.header .navigation {
  background-color: #20409a;
  position: relative;
}

.header .navigation .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  list-style: none;
}

.header .navigation .single-item {
  line-height: 4rem;
}

.header .navigation .link {
  text-align: center;
  width: 140px;
  text-decoration: none;
  display: inline-block;
  padding: 10px;
  color: #fff;
  font-size: 1.4rem;
  height: 100%;
}

.header .navigation .link:hover {
  background-color: #0068ac;
}

.header .sub-menu-container {
  display: none;
  height: 200px;
  width: 100vw;
  background-color: #0068ac;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header .link:hover + .sub-menu-container {
  display: block;
}

谢谢

保罗

Answer 1

代替：

.header .link:hover + .sub-menu-container {
    display: block;
 }

使用：

.header .item:hover .sub-menu-container {
    display: block;
}