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

Question

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

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

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

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

My drop down menu does not show when I move my mouse from the anchor tag link on my menu

html

css

navigation

drop-down-menu