jquery - Bootstrap 悬停在导航元素 'div isn' t 显示'？

Question

当我将鼠标悬停在导航栏 #categories 上时，我试图显示 div(#list) 但我不知道出了什么问题。它不起作用，即使没有任何元素我也没有得到显示列表。

我正在尝试使用 #main #div #this:hover + #list {} 但它仍然无法正常工作。 我不知道我哪里出错了。

当我将鼠标悬停在 #categories 上时，我该怎么做，我想显示 #list。

谁能解决这个问题？

#list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

#list {
  width: 100px;
  background: tomato;
  position: absolute;
  top: 55px;
  left: 130px;
  display: none;
}

#main #div #this:hover #list {
  background: red;
  display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav id="main" class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div id="div" class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li id="this" class="nav-item">
        <a class="nav-link" href="#">categories</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>
<br>


<div id="list">
  <ul>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
  </ul>
</div>

Answer 1

试试这个:

<nav id="main" class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div id="div" class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li id="this" class="nav-item">
        <a class="nav-link" href="#">categories</a>
        <ul id="list">
          <li>Banana</li>
          <li>Banana</li>
          <li>Banana</li>
          <li>Banana</li>
          <li>Banana</li>
          <li>Banana</li>
          <li>Banana</li>
          <li>Banana</li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

和风格:

 #list {
    display: none;
}
#main #div #this:hover  > #list {
    display: block;
}