Issue with multi-level bootstrap navbar: Unable to hover on child elements

Currently, I am working on implementing a multi-level navbar in my project using Bootstrap Navbar along with additional CSS and Jquery.

If you want to review the codes, they can be found at: CodePen

$(function() {
    // ------------------------------------------------------- //
    // Multi Level dropdowns
    // ------------------------------------------------------ //
    $("ul.dropdown-menu [data-toggle='dropdown']").on("mouseover", function(event) {
      event.preventDefault();
      event.stopPropagation();
      $(this).siblings().toggleClass("show");
    });

    $("ul.dropdown-menu [data-toggle='dropdown']").on("mouseleave", function(event) {
        $(this).siblings().removeClass("show");
    });
});
.dropdown-submenu {
    position: relative;
  }
  
  .dropdown-submenu>a:after {
    content: "\f0da";
    float: right;
    border: none;
    font-family: 'FontAwesome';
  }
  
  .dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 0px;
    margin-left: 0px;
  }
  .dropdown-item {
    padding: .25rem 0.5rem!important;
  }
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/5336ef90a8.js" crossorigin="anonymous"></script>
    <title>Test</title>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a class="navbar-brand" href="./"> <img class="favicon" src="{{asset('img/Favicon.ico')}}" alt=""> </a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#headerNav"
            aria-controls="headerNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="headerNav">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                </li>
                <!-- Level one dropdown -->
                <li class="nav-item dropdown">
                    <a id="dropdownMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        class="nav-link dropdown-toggle">CATEGORIES</a>
                    <ul aria-labelledby="dropdownMenu1" class="dropdown-menu border-0 shadow">

                    ...

                    <!-- End Level one -->

            </ul>

        </div>
    </nav>
    <!-- End Navbar -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://kit.fontawesome.com/67aa126bbd.js" crossorigin="anonymous"></script>
</body>

</html>

One issue that I am facing is the inability to hover over child elements like CF1, CF2, CF3, etc., in the sub-menus. When I move the mouse out of the parent element (e.g. Ceiling Fans), the sub-menu disappears.

Answer №1

Include the Following CSS Snippet

.dropdown-submenu:hover .dropdown-menu {
    show: block;
}

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 Veux Store is throwing an error message that says "Array is

When retrieving data from the Vuex Store, I start by checking if the array is present. Following that, my next step is to verify whether the noProducts object at index 0 exists. This validation process is important because the tweakwiseSortedProducts vari ...

Using CSS to mask images with border-radius

I am currently designing a website for a friend, and I have encountered an issue with an image that I have masked using CSS border-radius. The image is larger and taller than its container, so I used JavaScript to center it correctly. However, it appears ...

What is the abbreviated term for personalized elements in React Native development?

After discovering that custom components can be created like this: const CustomComp=()=>{ console.log('Created custom comp'); return(<View></View>); } export default function App(){ return(<View style={{flex:1}}> &l ...

Background and border presentation issues arising from CSS conflict

While working on a webpage, I encountered a design conflict within a div that contains a group of other div elements. The current appearance can be seen at , and the desired look is shown in the image here: enter image description here ...

Controller experiencing issues with Ajax passing null value

My webpage features a dropdown menu with a list of ID's to choose from. When a customer selects an option, it should update the price total displayed on the page. To achieve this functionality, I'm working on implementing an AJAX call that will u ...

What is the best way to implement a JSON object within an <img> src attribute?

Currently, I am in the process of creating a dynamic Vuetify navigation drawer and I have the intention of storing images in a JSON array. My main inquiry revolves around figuring out if it's feasible to extract the image attribute and incorporate it ...

Incorporating Chakra UI, what is the best way to display a modal box upon page load?

Is there a way to display a modal box when the page loads in Chakra UI? I have been searching through Chakra's documentation but couldn't find any information on this. import { useDisclosure, Modal, ModalOverlay, ModalContent, ...

Retrieve an image from an external web service and transfer it to a different route in Express.js

I am facing an issue with passing an image object from an external web service through a node express route. The specific problem I am encountering involves retrieving an image from a URL and attempting to pass it as is, but it seems to be not functioning ...

My React application came to an unexpected halt with an error message stating: "TypeError: Cannot read properties of undefined (reading 'prototype')"

Everything was running smoothly with my app until I encountered this error without making any significant changes: TypeError: Cannot read properties of undefined (reading 'prototype') (anonymous function) .../client/node_modules/express/lib/resp ...

What is the best way to utilize my data with Charts.js for my specific situation?

I am utilizing Charts.js in my Angular project (not AngularJS) and I am trying to create a graphic representation with data from my database that shows the distribution between men and women. However, I am struggling to figure out how to loop through the d ...

Conceal the div element five seconds after the registration process is completed

Is it possible to automatically hide a div 5 seconds after a user registers? Using the timestamp in PHP for the user's registration, there may be a way to achieve this with jQuery, but it's not certain. I found a script online that successfully ...

How can I retrieve the reference number of an item by clicking a button within a list item in an unordered

Presented here is a collection of data points and a button nested within an ul <ul> <li class="mix" category-1="" data-value="600.35" style="display:block;"> <figure> <figcaption> <h3> ...

extract information from the request header

One of the functionalities in my application involves making Ajax requests to the server. $.ajax({ type: "get", beforeSend: function (jqXHR) { jqXHR.setRequestHeader(ZO_KEY1, _key1); jqXHR.setReq ...

Issues with loading SourceMap in DevTools after upgrading from Bootstrap 3 to 4

I am currently working on a project with Angular 6 and .NET MVC where I am in the process of upgrading from Bootstrap 3 to Bootstrap 4. Initially, I had been using the Bootstrap 3 CDN and everything was working smoothly. However, I recently had to switch t ...

Show buttons in varying styles aligned next to each other

Here is the code snippet I'm currently working with: <fieldset class=last> <button>Refresh</button> <button> Clear</button> </fieldset> <form method="POST" action="*******"> <button> Down ...

Finding the arithmetic operator and then assigning both the operator and its index to a globally accessible variable can be accomplished through a

Hello, I am currently learning web development and as a beginner project, I am working on creating a calculator in React. My goal is to have the selected arithmetic operation ("+", "/", "-", or "X") executed when the user clicks "=". To achieve this, I s ...

Creating a simulation in THREE.js that incorporates MeshBasicMaterial, with the added feature of being able to

Creating a dungeon crawler game using three.js has been quite the learning experience. Initially, I opted for MeshBasicMaterial to ensure everything was uniformly visible in the dungeon. However, I wanted to experiment with adding bonus lights peeking thro ...

Troubleshooting a vertical overflow problem with Flexbox

Struggling to design a portfolio page for FreeCodeCamp using flexbox layout due to vertical overflow issues. Here is the HTML: <div class="flex-container flex-column top"> <header class="flex-container"> <h1 class="logo"><i clas ...

The process of deleting lines from an image using Javascript

If I have an image of a data-table and I want to eliminate all the grid lines (defined as continuous vertical or horizontal pixels), is there a way to achieve this using Javascript's image data manipulation? I envision looping through a 2D array conta ...

How can we improve the Promise.all syntax for cleaner code?

Recently diving into Node.JS, I find the syntax of Promise.all returning an array to be quite frustrating. For example: const requiredData = await Promise.all([ getFirst(city), getSecond(hubIds), getThird(city, customerCategoryKey ...