Is the display of the 'div' not working when hovering over Bootstrap navigation items?

I am attempting to display the div (#list) when hovering over the navbar item #categories, but for some reason it is not working. None of the items are displaying the list as intended.

I have tried using 

#main #div #this:hover + #list {}
but still no success. I can't seem to pinpoint where the issue lies.

How can I achieve the desired outcome of displaying #list when hovering over #categories?

Can anyone help me troubleshoot this?

#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>

jquerycsstwitter-bootstrapbootstrap-4navbar

Answer №1

Give this a shot:

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

and add some flair with this CSS: 

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

Answer №2

To implement this functionality, you can restructure your HTML by moving #list inside #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>

Check out the demo below:

#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>

Answer №3

To make it work properly, you have to include the onclick class.

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

After that, in your CSS file, ensure that you have added the Display:block property to the active class.

Answer №4

Here is a jQuery solution to achieve this:

$('#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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieve consistent card body heights in Bootstrap 4 with the card group feature

I am working towards achieving a specific layout using Bootstrap 4's card-group feature, as shown in the image below: The goal is to have everything at the same height within each card (including card-header, card-title, and small subtext if present) ...

htmlcssflexboxbootstrap-4

Advanced jQuery Autocomplete with Nested Ajax Requests

I am currently developing a feature that allows users to search for albums using the Spotify Metadata API. The main functionality is working well, but I'm running into an issue with retrieving album cover art when making nested calls. This seems to be ...

javascriptjqueryjquery-uijquery-ui-autocompletespotify

The carousel display does not adjust to smaller devices as it should

My HTML code is displayed below. <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" > <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></ ...

htmlbootstrap-4

Assistance with JQuery Validation

I'm in need of assistance for validating a form using JQuery: Below is the code I currently have: <form action='index.php' method='post'> <table> <tr> <td>1.</td> <td><select name=&a ...

jqueryvalidation

Loading content synchronously

Could you assist me in finding a solution to synchronize the loading of pages and elements? Currently, my code looks like this: $(Element).load(File); ... other commands... window.onload = function () { Update_Elements(Class, Content); } Everything ...

javascriptjquery

The most basic security measure for safeguarding a webpage

Currently, I am developing a website that requires customers to input a specific "code" in order to gain access. Upon visiting the site, users will be prompted to enter a simple code to proceed further. My programming skills are limited to HTML, CSS, and J ...

javascripthtmlcss

Ensure that attention remains on the parent div element using jQuery`

My issue pertains to a restaurant website. I am looking to create a catalog that displays all the food items. When a user hovers over each food item, detailed information should appear. A div will display over the image with the details, and the user mus ...

jquery

Creating a Sleek Navbar Design with Bootstrap 4 and a Centered Logo

I am looking for a Bootstrap 4 navbar with a centered logo and 4 links - 2 on each side that are responsive. /*------------- navigation -------------*/ .site-logo { width: 100px; padding: 5px; } .navbar .flex-1 { flex: 1; flex-basis: 100%; } na ...

bootstrap-4navbar

Ensuring the title div is the foremost layer

So I have written the following code for my personal website: Here is the HTML: <html> <head> <meta charset="utf-8"> <title>My Website</title> <link rel="stylesheet" href="assets/css/style.css" ...

htmlcss

Create a captivating dropdown hover menu with animated CSS

My latest project involves creating a sleek CSS dropdown button/menu that I am now attempting to add animation to. Initially, the menu transitioned from display: none to display:block on hover, but I encountered issues animating it. So, I decided to switc ...

htmlcssanimationcss-animations

Is there a way to create a glow effect in CSS that considers the background color?

Exploring ways to create realistic-looking LEDs using HTML and CSS has been a fun challenge. Achieving a glowing effect for each LED would be simple if the color remained constant. However, I aim for the glow to dynamically adjust based on the LED's c ...

javascripthtmlcss

Creating flexible DIV columns that adjust to display changes using Bootstrap 3's CSS

I am currently facing a challenge with a simple layout problem: My objective is to create a toggle side menu. When the side menu is visible, the main layout should be 80% width, and when it is not visible, the main layout should be 100% width, as shown be ...

htmlcsstwitter-bootstraplayoutweb

The height of the div increases as the browser window reduces in size

Is there a way to ensure that the div (home) remains centered on the page while keeping the footer at the bottom, even as I resize the browser window? Currently, the issue is that the div moves to the top when I shrink the window. Just to note, I am using ...

htmlcssbootstrap-5

Tips for fixing ReferenceError: Cookies is undefined

Currently, I'm configuring a modal that will be hidden once the user submits their request. if ( Cookies.get("submitted") && JSON.parse(Cookies.get("submitted")) ) { $("#booking-form-modal").hide(); return true; error page ...

jqueryajaxlaraveljs-cookie

Styling for inactive buttons not being implemented

I'm having trouble applying disabled styling to a button component using SCSS. The button has multiple classes: <button className="button button--size-short-wide button--secondary" data-cy="letters-compose-message-content-add-ph ...

javascriptcsssass

Implementing Datepicker with ngModel in Angular

I implemented a date picker in my form using the guidelines from this page: <div class="input-group date" data-provide="datepicker" > <input type="text" class="form-control"> <div class=&quo ...

angularbootstrap-4datepicker

What is the best way to include a hyperlink in a component?

Is there a way to link this code snippet: <Col key = {item.id}> <StoreItem {...item}/> </Col> to redirect to the following route? <Route path = '/' element = {<Home />} /> Here is the source co ...

reactjstypescriptbootstrap-4

Utilizing a modal for Wordpress search queries

I recently started learning PHP and JavaScript, and I've encountered a problem that has me stumped. On my website www.test.com/page, I have a search form that sends user input to www.test.com/results like this: <form method="post" action="https:/ ...

phpjquerywordpresstwitter-bootstrap

identifying which specific button was clicked using JavaScript/jQuery

All of the buttons on my page are identical - same title, same value, everything is the same. Is there a way for me to identify which specific button was clicked? ...

javascriptjquerybutton

Script for determining the duration of idle time on a webpage

Is there a method to track the idle time on a page if a user is not actively engaged in any tasks? My project utilizes JSP, Struts1, JQM, and JS. ...

javascriptjqueryajaxjspjquery-mobile