Bootstrap does not show submenus on its navigation menus

I am currently designing a menu with Bootstrap, but for some reason, the submenu items are not showing up.

https://i.stack.imgur.com/qZqyf.png

After carefully reviewing the HTML code multiple times, I am unable to identify any issues. I am now questioning whether there might be something missing in my CSS.

.navbar-nav li:hover>ul.dropdown-menu {
  display: block;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
}

/* rotate caret on hover */

.dropdown-menu>li>a:hover:after {
  text-decoration: underline;
  transform: rotate(-90deg);
}

The expected output should look like the image shown here:

https://i.stack.imgur.com/QSQtm.png

I am puzzled by why the submenu items are not visible even though everything seems correct in the code.

javascripthtmlcsstwitter-bootstrap

Answer №1

Your CSS is incomplete, the .dropdown-item class has a default style of display: none, which is why it wasn't visible. By adding a hover effect, it should now display correctly.

.dropdown-menu>li:hover ul.dropdown-menu {
  display: inline-block;
  position: absolute;
  top: 2rem;
  left: 100%;
}

Here's the updated snippet example with full CSS:

.navbar-nav li:hover>ul.dropdown-menu {
  display: block;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
}


/* rotate caret on hover */

.dropdown-menu>li>a:hover:after {
  text-decoration: underline;
  transform: rotate(-90deg);
}

.dropdown-menu>li:hover ul.dropdown-menu {
  display: inline-block;
  position: absolute;
  top: 2rem;
  left: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<!-- Menu Productos -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand pb-2" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fas fa-project-diagram"></i> Products <b class="caret"></b>
      </a>
      <ul class="dropdown-menu dropdown-menu--dark">

        <li>
          <a class="dropdown-item" [routerLink]='["/ConsoProducts"]'>
            <i class="fa fa-align-left" aria-hidden="true"></i> Consolidated
          </a>
        </li>
        <li class="dropdown-submenu--dark">
          <a class="dropdown-item dropdown-toggle" [routerLink]='["/RegProducts"]'>
         Product Registration
      </a>
          <ul class="dropdown-menu">
            <li>
              <a class="dropdown-item">
             Generate New Knowledge
          </a>
            </li>

            <li>
              <a class="dropdown-item">
             Technological Development and Innovation
          </a>
            </li>
            <li>
              <a class="dropdown-item">
                <i class="fa fa-align-left" aria-hidden="true"></i> Social Appropriation of Knowledge
              </a>
            </li>
          </ul>
        </li>
      </ul>

    </li>

    <!-- End Products Menu -->
  </div>
</nav>

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

Is it possible for me to customize the default angular filter in order to prioritize displaying strings that begin with the search term?

In my current project, we are dealing with a massive list of strings (17,000+ at times) and have implemented an input box for filtering the list. Initially, I used Angular's default filter, but then a request came in to sort the list so that strings s ...

javascriptangularjssortingangular-filters

Creating a SVG polygon using an array of points in JavaScript

Consider the following array containing points: arr = [ [ 0,0 ], [ 50,50 ], [ 25,25 ], ]; I would like to create an SVG polygon using this array. Initially, I thought the code below would work, but it doesn't: <polygo ...

javascriptarrayshtmlsvg

Exploring jQuery Mobile: Uncovering the Power of clientX, clientY, and taphold Event

In my current project, I am implementing the taphold event and require the coordinates of the tapped point by the user. However, I have encountered an issue where event.clientX and event.clientY are returning as undefined (you can see the example here: her ...

javascriptjqueryjquery-mobile

An issue is encountered with the JavascriptExecutor while attempting to navigate to a different page using Selenium Webdriver

My goal is to capture user actions such as clicks, keypress, and other DOM events by adding JavaScript event listeners to the WebDriver instance. Everything works fine until I navigate to the next page, where I encounter an exception due to an undefined fu ...

javajavascriptseleniumselenium-webdriverwebdriver

Popup that appears when a user clicks on content that was dynamically loaded through ajax

After creating the code below: jQuery('a[rel=popover]').popover({ html: true, title: '', content: function() { ..... ..... } }).live('click', function(e) { e.preventDefault(); ...... ...... }); I also h ...

jqueryajaxtwitter-bootstrappopover

Placing jQuery in the lower part of my HTML templates lacks adaptability

Lately, I've been optimizing my templates by placing the jQuery code link at the end of the template files to ensure fast page load speeds. Along with that, I have specific javascript modules reserved for certain pages that are included within the con ...

javascriptjquerytemplates

What is the method for creating a transparent background for Material UI v1.0 Dialogs?

I'm attempting to place a CircularProgress component inside a dialog box. However, I'm facing an issue where the background of the dialog box is white and cannot be set to transparent like in previous versions of Material UI (v0.2). style={{ ...

cssreactjsdialogmaterial-ui

Error message: Unhandled error: The function Role.Create is not defined

I'm encountering an issue with a ".create is not a function" error while trying to repopulate my database upon restarting nodemon. Previously, everything was functioning well and all the tables were populated successfully. However, I keep receiving th ...

javascriptnode.jsexpresssequelize.js

How can an array be generated functionally using properties from an array of objects?

Here's the current implementation that is functioning as expected: let newList: any[] = []; for (let stuff of this.Stuff) { newList = newList.concat(stuff.food); } The "Stuff" array consists of objects where each ...

javascripttypescriptfunctional-programming

Altering the submit button's value following the submission of a form

My goal is to create a form with a submit button that, when clicked, will insert the value of the button into a database and change the text on the button to inserted. If the insertion violates any constraints, then the text on the button should be changed ...

phphtmlajax

Generating random images using Javascript

I am facing some challenges while creating my first custom JavaScript function. My goal is to display three random thumbnails on my webpage by selecting images from a pool of options. However, I am encountering issues with duplicated images and handling s ...

javascripthtmlloopsconditional-statements

Experiencing an unusual issue with grunt: The Gruntfile.js seems to be missing the 'flatten' method

Encountering an unusual error message while attempting to run grunt stated: TypeError: Object Gruntfile.js has no method 'flatten' Being a beginner with node.js, npm, and grunt, I believe my installation of node, npm, and grunt was done correctl ...

javascriptnode.jsnpmgruntjs

Issue with WebRTC, socket.io, and node.js: Unable to access the property 'emit' as it is undefined

Currently, I am in the process of creating a webrtc video app. Within the client code section, the following lines are present: getUserMedia(constraints, handlemedia, errorhandle); constraints = {video: true}; function handlemedia(stream){ //other act ...

javascriptnode.jssocket.iowebrtcp2p

Exploring React JS Subdomains

I have been developing a MERN application that needs to support dynamic subdomains for each company, like companyname.localhost. In order to make this work, I made an adjustment in my .env file with the line: DANGEROUSLY_DISABLE_HOST_CHECK=true After a us ...

javascriptnode.jsreactjsexpresssubdomain

Is there a way to fill an HTML text box with data retrieved from a session or managed on the server side using C# and HTML?

I have some textbox values on an aspx page that I pass to the next page using sessions. Now, I want to display these values in an HTML textbox. How can I achieve this? The values I have are server-side, while the HTML text box value is client-side (this is ...

c#htmlasp.net

Import and load numerous JSON files into a responsive and visually appealing Bootstrap table

I am new to coding in javascript and I'm seeking assistance in loading multiple JSON files to populate a bootstrap table. Currently, I've managed to create a table by manually combining the content from different files into one variable called l ...

javascriptjsonbootstrap-table

Incorporating the JQuery plugin Lightbox_me into a Ruby on Rails application

Greetings! I am currently attempting to incorporate a popup window using the Lightbox_me plugin in my Ruby On Rails application. After downloading jquery.lightbox_me.js and placing it in the app/assets/javascripts directory, I added //= require jquery.lig ...

javascriptjqueryruby-on-railscoffeescriptlightbox

Showcasing the information stored within my li element, I am able to access and view the data through my console

I want to showcase the data in the browser Upon hitting the api call, I retrieve the data in my console. The challenge lies in displaying the data within my li tag. Below are snippets of my relevant code and the entire code can be found in the gist links p ...

javascripthtmlangularangular2-templateangular6

Having trouble importing JS into HTML file with NodeJS

I have created a web server using NodeJS that serves the file index.html. However, when I attempt to add a JavaScript file to my HTML document, the browser displays an error message stating The resource "http://localhost:3000/includes/main.js" was blocked ...

javascripthtmlnode.jsexpress

The instance does not have a definition for the property or method "foo" that was referenced during rendering

[Vue warn]: Property or method "modelInfo" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. Whenever I ...

javascriptvue.jsnuxt.js