Struggling to create a multilevel drop-down menu with bootstrap that activates on hover

ul {
  list-style-type: none
}


.navbar-nav:hover .secondDropdown{
  display:block;
}


.navbar-nav .secondDropdown{
  display:none;
}


.navbarDropdown2{
  display:none;
}


.dropdown-toggle:hover .navbarDropdown2 {
  display: block;
}

.dropdown-item:hover ul{
     display: block;
}
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Apparel </a>
      <ul class="dropdown-menu secondDropdown" aria-labelledby="navbarDropdown">
        <li class="dropdown-item dropdown"><a class="dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Girls</a>
          <ul class="" aria-labelledby="navbarDropdown2">
            <li class="dropdown-item dropdown"><a href="/Apparel/Girls/Shoes/10015">Shoes</a></li>
          </ul>
        </li>
        <li class="dropdown-item dropdown"><a class="dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Boys</a>
          <ul class="" aria-labelledby="navbarDropdown2">
            <li class="dropdown-item dropdown"><a href="/Apparel/Boys/Pants/10019">Pants</a></li>
          </ul>
        </li>
        <li class="dropdown-item dropdown"><a class="dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Women</a>
          <ul class="" aria-labelledby="navbarDropdown2">
            <li class="dropdown-item dropdown"><a href="/Apparel/Women/Dresses/10001">Dresses</a></li>
          </ul>
        </li>
        <li class="dropdown-item dropdown"><a class="dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Men</a>
          <ul class="" aria-labelledby="navbarDropdown2">
            <li class="dropdown-item dropdown"><a href="/Apparel/Men/Jackets/10009">Jackets</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Electronics </a>
      <ul class="dropdown-menu secondDropdown" aria-labelledby="navbarDropdown">
        <li class="dropdown-item dropdown"><a class="dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Accessories</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Grocery </a>
      <ul class="dropdown-menu secondDropdown" aria-labelledby="navbarDropdown">
        <li class="dropdown-item dropdown"><a class="dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dairy</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Health </a>
      <ul class="dropdown-menu secondDropdown" aria-labelledby="navbarDropdown">
        <li class="dropdown-item dropdown"><a class="dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Medicine</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Home &amp; Furnishing </a>
      <ul class="dropdown-menu secondDropdown" aria-labelledby="navbarDropdown">
        <li class="dropdown-item dropdown"><a class="dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Bath Accessories</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Newsletters &amp; Magazines </a>
      <ul class="dropdown-menu secondDropdown" aria-labelledby="navbarDropdown">
        <li class="dropdown-item dropdown"><a class="dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Magazines</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Hello everyone! I am relatively new to working with CSS and Bootstrap, and have been attempting to create a multi-level dropdown menu using these technologies. However, I seem to be encountering an issue where clicking on any item in the list causes all items to open simultaneously. I have included my code in a FIDDLE for reference, but I'm struggling to identify where I may have made a mistake. Despite experimenting with different values for 'display', I have not been able to resolve the problem.

If anyone could offer guidance or insight into this issue, I would greatly appreciate it. Thank you in advance!

htmlcsstwitter-bootstrap

Answer №1

I believe this is the solution you were searching for. The issue was caused by applying the hover effect to the .navbar-nav element, affecting all instances of the secondDropdown class since they are descendants of the navbar. Changing the CSS from .navbar-nav:hover to .dropdown:hover resolved the problem.

ul {
  list-style-type: none
}

.dropdown:hover .secondDropdown {
  display: block;
}

.navbar-nav .secondDropdown {
  display: none;
}

.navbarDropdown2 {
  display: none;
}

.dropdown-toggle:hover>.navbarDropdown2 {
  display: block;
}

.dropdown-item:hover ul {
  display: block;
}
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav ml-auto">
    ... (HTML code not shown here for brevity) ...
  </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

The form yields no response and fails to send any data

Ensuring that the form on this site successfully sends the name and phone number is crucial. However, upon clicking the send button, I encounter an empty modal window instead of a response indicating whether the data was sent or not. The contents of the fi ...

javascriptphpjqueryhtmlcss

Anomalous behavior of buttons in react-redux

Currently, I have a basic counter set up in react-redux as part of my learning process with these frameworks. My goal is to create a pair of number input fields that determine the payload for an increment/decrement action sequence. The intended outcome is ...

javascripthtmlreactjsreduxreact-redux

What is the best way to make my button sticky across different screen sizes on my webpage?

I'm having trouble figuring out how to make my purple button sticky and responsive on the right side of the screen as I scroll down. Can someone help me with this? This is the snippet of my HTML code: <Col className="colPre"> ...

htmlcssreactjs

Enhance the bubble charts in Kendo UI Graph by adding dimension and depth to the bubbles for a more visually

Is there a way to create a relief effect on the bubbles in Kendo UI Bubble charts? Currently, all bubbles appear flat with the 15 provided themes. You can see an example here: It would be great to have a 3D-style option similar to the pie chart (Uniform s ...

csskendo-uitelerikstylesbubble-chart

Encountering iOS 10 freezing issues when scrolling through an HTML list that is styled with -webkit-overflow-scrolling: touch

Overview This specific issue pertains to a potential freeze that occurs when scrolling through a <ul /> element that has been styled using CSS, specifically with the property -webkit-overflow-scrolling: touch on the Safari browser of iOS. Related Pr ...

htmlioscssmobile-safari

How come inactive links are still able to be clicked on?

I have been experimenting with various methods to disable links, but I seem to be unable to prevent them from being clickable. While I was successful in changing the cursor to 'not-allowed' when hovering over the disabled link, it still remains c ...

htmlcss

What is causing the navigation bar object to not adhere to the CSS rules?

My presentation for the MVP is outlined below: .navbar { flex-direction: row; } <!DOCTYPE html> <html lang="en" dir="ltr> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="h ...

htmlcssbootstrap-4

"Enforce a specific height on a div that is exclusively showing a background

I have been trying to use a div element to showcase a specific color, where the background color acts as the content. However, no matter what height or width settings I input, I am unable to achieve the desired size for the div. Even after experimenting w ...

htmlblazorheight

The CSS transition fails to function correctly once a specific function is executed

When I hover over a div, the background color changes due to a transition effect. However, if I click on a button that triggers myFunction2 to change the background color of the div before hovering over it, the transition effect no longer works. functi ...

javascripthtmlcss

Placing the input-group-addon above the text-input for better positioning

Feeling overwhelmed trying to finalize a simple form due to CSS issues? Check out this image for a visual of the problem: https://i.stack.imgur.com/PgCmN.jpg The label is slightly off to the left, and the button appears larger than the input field. The i ...

htmlcsstwitter-bootstrap-3

Unlock the Full Potential: Enabling Javascript's Superpowers through PHP Execution

I specialize in PHP and JavaScript. Currently, I am attempting to incorporate JavaScript functionalities into my PHP code. However, I am encountering an issue where the code is not functioning properly. The PHP code that executes the JavaScript code is as ...

javascriptphphtml

The Razor MVC does not support HTML syntax within an If condition

Here is the code snippet I currently have in one of my MVC views. It seems that within the specified if condition, the HTML code is not being recognized. <table class="table"> <tr class="row h4"> <td>Task</td> ...

c#htmlasp.net-mvc-4razor

How to vertically center content using Bootstrap 4 and Laravel

Seeking to achieve vertical centering of my column content. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="container d-flex h-100"> <div class="row mt-5 "> < ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Implementing CSS to achieve striped row styling in a paragraph (not within a table)

Is there a way to achieve alternating row shading within a wrapped paragraph element without using the :nth-child technique? For instance, if we have: <p style="width:100px;"> row 0 -- hello row 1 -- world row 2 -- !!! </p> Some brow ...

css

Issue with PHP/MySQL registration page failing to save user information to database

As I work on developing my website that includes user registration and login functionality, I encountered an issue where the registration page was not loading properly. Initially, the registration process worked perfectly, but the next day, upon trying to ...

phphtmlmysql

Looking for assistance in creating contemporary gallery labels?

I am in the process of creating a portfolio website and I want to showcase some of my work from middle school. However, I would like to add a label to differentiate it from my current work. The gallery features various images with different dimensions dis ...

jquerycssimagelabelgallery

Click on a div to switch between displaying an arrow pointing to the right and an arrow

Currently working on a design for an accordion-style layout and looking to implement toggling arrow icons when the div is clicked. I have managed to toggle the content of the div successfully, but now seeking assistance in achieving the same functionality ...

javascriptjqueryhtmlcss

showing information on webpage 2 received via query parameters from webpage 1

Hello, I am trying to input text into a textarea and then send the data through a query string to another webpage. My goal is to display the data on the second webpage. I have written the following code, but it doesn't seem to be working. I've ch ...

javascripthtmljquerycssquery-string

Harmonizing controls with ASP.NET using CSS styling

I have created a web form application which is displayed in the image provided. However, when I view the same page in the browser, the output appears completely misaligned despite the designer file being perfect. The markup for this form is quite lengthy ...

htmlasp.netcss

Web page layout featuring fields set aside for completion with underlined formatting

As I work on an HTML document, I encounter a challenge with styling fields that need to be dynamically filled and underlined. Here is what I am aiming to achieve: "Applicant's Last Name:_________bar_____________ First Name:_________foo_____________" ...

htmlcss