Bootstrap при наведении на навигационные элементы 'div not display'?

Question

Я пытаюсь показать div (#list) при наведении курсора на navbar #categories, но я не понимаю, что происходит не так. Это не работает, даже Ни один из пунктов Я не получаю список на дисплее.

Я пытаюсь использовать #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;
}

Answer 2

С помощью jquery вы можете сделать это следующим образом

$('#categories').hover(function(){
$('#list').slideDown();
$('#list').mouseleave(function(){
$('#list').slideUp();
})
})

#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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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="categories" 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 3

Вам нужно добавить класс onclick

 $(Onclick() {                     
  $(".navbar-toggler").click(function() { 
    $(this).addClass("active");     
  });
});

Затем в CSS в классе active добавить DIsplay: block

Answer 4

Вы можете заставить его работать, если вы переместите #list в #this как:

<li id="this" class="nav-item">
  <a class="nav-link" href="#">categories</a>
  <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>
</li>

Демо

#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>
        <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>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>
<br>