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

Posted 2023-04-13

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

【英文标题】：My drop down menu does not show when I move my mouse from the anchor tag link on my menu

【发布时间】：2021-03-18 04:27:34

【问题描述】：

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

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;

谢谢

保罗

【参考方案1】：

代替：

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

使用：

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