javascript - 使用 li :hover is not showing div when the list item is an anchor

Question

我的下拉菜单有问题。我试图让最终结果看起来类似于 BestBuy.com 的导航。下面是代码，最后还有更多解释。

<div class="navbar">
<ul>
    <li>Products
        <div class="secondlevel">
            <ul>
                <li>Testing 1
                    <div class="thirdlevel two-columns">
                        <div class="column">
                            <ul>
                                <li>Testing 1</li>
                                <li>Testing 2</li>
                                <li>Testing 3</li>
                                <li>Testing 4</li>
                            </ul>
                        </div>
                        <div class="column">
                            <ul>
                                <li>Testing 1</li>
                                <li>Testing 2</li>
                                <li>Testing 3</li>
                                <li>Testing 4</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>Testing 2
                    <div class="thirdlevel">
                        <ul>
                            <li>Testing 1</li>
                            <li>Testing 2</li>
                            <li>Testing 3</li>
                            <li>Testing 4</li>
                        </ul>
                    </div>
                </li>
                <li>Testing 3</li>
                <li>Testing 4</li>
            </ul>
        </div>
    </li>
    <li>Test Link</li>
</div>

和我的 CSS:

body {
    font-family:sans-serif;
    background: #eee;
}

.navbar {
    background:lightblue;
    width: 100%;
    padding:0;
}

.navbar ul {
    list-style:none;
    padding:0;
    margin:0;
}

.navbar ul>li {
    display:inline-block;
}

.navbar ul li ul>li {
    display:block;
}

.secondlevel {
    position:absolute;
    width:350px;
    height:477px;
    background:#fff;
    padding:0;
    border: 1px solid #c3c4c4;
}

.thirdlevel {
    position:absolute;
    width:350px;
    height:477px;
    background:lightgreen;
    left:350px;
    border: 1px solid #c3c4c4;
    top:-1px;
}

.thirdlevel.two-columns {
    width:700px;
}

.thirdlevel div:first-child {
    position:absolute;
    left:0;
}

.thirdlevel div {
    position:absolute;
    right:0;
}

.column {
    width:350px;
}

.thirdlevel {
    display:none;
}

.secondlevel {
    display:none;
}


.navbar li:hover > div:first-child {
    display:block;
}

.active {
    display:block;
}

我遇到的问题是，当我尝试将列表项转换为链接时:<li><a>Products</a><li>

当我这样做时，将鼠标悬停在元素上不再有效。

此外，悬停效果在 IE 中也不起作用。我猜那是因为我正在使用 li:hover .

我曾尝试使用 jQuery 来实现悬停效果，我真的很想这样做，因为我读过它更适合我需要做的事情，但我在这方面的知识有限。

根据我的研究，我可以使用这样的东西:

$(document).ready(function () {
    $(".main-nav-item").hover(function () {
        $(".secondary-menu").toggleClass("active");
        $(".tertiary-menu").toggleClass("hide");
    });
});

当然，这些类(class)与我所拥有的不一致，但这就是它的要点。我遇到的问题是我无法让它只对一个 child 起作用。希望这是正确的词。例如:当我将鼠标悬停在我的第一个 <li> 上时它将打开所有子菜单。现在的方式是完美的，除了没有任何东西可以成为链接，这很重要。

如果您需要更多信息，请告诉我。

Answer 1

尝试在 <li><a>Link</a></li> 中建立链接进入 block 元素

a { display:block; }

对我有用

编辑(通过你的问题)

这是你要求的吗..

$(document).ready(function() {

  $(".main-nav-item a").hover(function() {
    $(".secondlevel").addClass("active");
    $(".thirdlevel").addClass("hide");
  });

  $(".secondlevel").hover(function() {
    $(".thirdlevel").addClass("active");
  });


});

body {

  font-family: sans-serif;

  background: #eee;

}

.navbar {

  background: #FFE;

  width: 100%;

  padding: 0;

}

.navbar ul {

  list-style: none;

  padding: 0;

  margin: 0;

}

.navbar ul>li {

  display: inline-block;

}

.navbar ul li ul>li {

  display: block;

}

.secondlevel {

  position: absolute;

  width: 350px;

  height: 477px;

  background: #fff;

  padding: 0;

  border: 1px solid #c3c4c4;

}

.thirdlevel {

  position: absolute;

  width: 350px;

  height: 477px;

  background: #AABC34;

  left: 350px;

  border: 1px solid #c3c4c4;

  top: -1px;

}

.thirdlevel.two-columns {

  width: 700px;

}

.thirdlevel div:first-child {

  position: absolute;

  left: 0;

}

.thirdlevel div {

  position: absolute;

  right: 0;

}

.column {

  width: 350px;

}

.thirdlevel {

  display: none;

}

.secondlevel {

  display: none;

}

.navbar li:hover > div:first-child {

  display: block;

}

.active {

  display: block;

}

a {

  display: block;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <ul>
    <li class="main-nav-item">
      <a href="#">Products</a>
      <div class="secondlevel">
        <ul>
          <li>
            <a href="#">Testing 1</a>
            <div class="thirdlevel two-columns">
              <div class="column">
                <ul>
                  <li>Testing 1
                  </li>
                  <li>Testing 2
                  </li>
                  <li>Testing 3
                  </li>
                  <li>Testing 4
                  </li>
                </ul>
              </div>
              <div class="column">
                <ul>
                  <li>Testing 1
                  </li>
                  <li>Testing 2
                  </li>
                  <li>Testing 3
                  </li>
                  <li>Testing 4
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>Testing 2
            <div class="thirdlevel">
              <ul>
                <li>Testing 1
                </li>
                <li>Testing 2
                </li>
                <li>Testing 3
                </li>
                <li>Testing 4
                </li>
              </ul>
            </div>
          </li>
          <li>Testing 3
          </li>
          <li>Testing 4
          </li>
        </ul>
      </div>
    </li>
    <li>Test Link
    </li>
  </ul>
</div>