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 the validity of the expression !args.value || args.value.length true?

After analyzing this segment of code, I noticed an interesting expression: !args.value || args.value.length For instance, consider the following scenario: let v = {}; console.log(!v.value); //outputs true console.log(v.value); //outputs undefined con ...

javascripttypescript

What alternatives are there to angular scope functions?

I find angular scope functions challenging to work with due to their lack of a clear contract. They extract parameters from the scope and store results back into the scope, rather than explicitly defining function parameters and returning a result. Conside ...

javascriptangularjsfunctionangularjs-scope

Here is a guide on updating HTML table values in Node.js using Socket.IO

I successfully set up socket io communication between my Node.js backend and HTML frontend. After starting the Node.js server, I use the following code to emit the data 'dRealValue' to the client side: socket.emit ('last0', dRealValue) ...

javascripthtmlnode.jssocket.io

Can the text inside a div be styled to resemble h1 without using an actual h1 tag?

Is it feasible to apply the h1 style to all text within a div without utilizing tags? For instance: <div id="title-div" style="h1">My Title</div> Or a potential solution could be: #title-div { style: h1; //Imports all s ...

htmlcss

Modify the scoped variable using Angular's $resource module

I am facing an issue with my Angular application where I cannot get the results of a second $resource call to update a scoped variable. Initially, I am able to generate the initial view from an Angular $resource call to an external API and display the data ...

javascriptjsonangularjsangular-resourceangular-http

What is the best way to add content in JavaScript?

Just diving into the world of JavaScript, HTML, and web development tools here. var labels = {{ labels|tojson|safe }}; After using console.log to check the content of labels with console.log(JSON.stringify(labels));, I got this output: [ {"id":"1", ...

javascriptajax

Deactivating choices in Autoselect from Material UI

I am attempting to implement a feature in the autocomplete of material ui where options are disabled based on a specific condition. Each table row contains an autocomplete field, and when an option is selected in one row, it should be disabled in the next ...

javascriptreactjsautocompletematerial-uidisable

Utilizing Node and Express to promptly respond to the user before resuming the program's

I am accustomed to receiving a user's request, handling it, and providing the outcome in response. However, I am faced with an API endpoint that requires about 10 tasks to be completed across various databases, logging, emailing, etc. All of these ta ...

javascriptnode.jsexpressasync-await

What is the most effective method for accessing, editing, and outputting large JSON files in Node JS?

Task at hand: I need to handle large amounts of data (1 GB & more) in JSON format, perform formatting, parse the data, restructure the JSON, and return the newly formatted JSON as a response. What is the best approach for this situation? I read on a blog ...

javascriptjsonnode.js

The functionality of Anchor `<a>` tags is compromised in Chrome when using the hashtag symbol (#)

Below is the code I have implemented on my website: <li><a href="/explore/#Sound">Sound</a></li> (This menu is visible on all pages) <a id="Sound"><a> (This is on the specific page where I want to link to) I have at ...

htmlgoogle-chromecross-browser

Determine if the specific subroute has a child using vue-router

After checking similar questions on stackoverflow without success, I am seeking a solution. I am attempting to determine if a subroute is a child of a specific route in order to display a container. Unfortunately, the following code snippet does not work: ...

javascriptvue.jsvue-router

I'm having trouble locating the airtable module, even after I successfully ran npm install airtable

Currently attempting to integrate the airtable api into my website's backend using node.js. However, upon writing var Airtable = require('airtable'); and running the file with node [filepath], I encounter an error in the command prompt: ...

javascriptnode.jsnpm-installairtable

What is the best way to store textarea information into a session using the jQuery AJAX post method in Codeigniter?

I am having trouble saving the text from a textarea to the Controller session using jQuery AJAX post method in Codeigniter Smarty. I am unable to save the data to the session. Can someone please provide me with guidance and a detailed example of how to ach ...

javascriptphpjqueryajaxcodeigniter

Can values be extracted from a JSON object that is saved in a separate JavaScript file?

In my current project, I am creating unique tables dynamically and displaying them using JavaScript after making an AJAX call. Instead of writing individual code for each table, I'm looking to establish a standard layout where I can customize the desi ...

javascriptajaxjson

JS problem with decreasing

Within a React component, I have implemented the following method: addWidget = (index) => { let endX = this.state.widgets.reduce((endX, w) => endX.w + w.w, 0) console.log(endX); if (endX === 12) endX = 0 this.setState({ wi ...

javascriptreactjsecmascript-6

Utilizing ng-class for dynamic routing and controlling

I am currently in the process of developing a dynamic framework using AngularJS. My plan involves allowing users to add new templateUrl and controller from a JSON file, like the one shown in templates.json: { "pages" : [ { "name" : "home" ...

javascriptangularjsjsontemplatesdynamic

In Firefox, certain scroll positions cause elements to vanish

I've been struggling with a peculiar bug that I can't seem to fix. The issue arises in Firefox when scrolling on a MacBook Pro 2019 15" at 1680x1050 resolution - product elements (not just images) begin to flicker. I have recorded a video of th ...

htmlcssmacosfirefoxdesktop

Utilizing JQuery for a smooth animation effect with the slide down feature

I have a question about my top navigation bar animation. While scrolling down, it seems to be working fine but the animation comes with a fade effect. I would like to achieve a slide-down effect for the background instead. Since scrolling doesn't trig ...

javascriptjqueryhtmlcssanimation

How can I retrieve JSON data from an AJAX request on an HTML page?

How can I display my JSON data on an HTML page using this JavaScript code? $.ajax({ url : 'auth.json', type: "GET", dataType : "jsonp", success: function(result) { $.each(result, function(i, v) { // Loop through each record in ...

javascriptjqueryhtmlajaxjson

Styling components using classes in Material-UI

I recently started using material-ui and noticed that it applies inline styles to each component. After running a test with multiple instances of the same component, I realized that there was no CSS-based styling - only repeated inline styles were generate ...

javascripthtmlcssreactjsmaterial-ui