The dropdown function in Bootstrap seems to be malfunctioning

I have implemented a basic dropdown menu using the code below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="nav-menu d-none d-lg-block">
    <ul>
       <li class="active"><a href="#header">Dashboard</a></li>

       <li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
       <ul>
               <li><a href="#">Drop Down 1</a></li>
               <li><a href="#">Drop Down 2</a></li>
               <li><a href="#">Drop Down 3</a></li>
       </ul>            
        </li>
    </ul>
 </nav>

I've also included these libraries in my project:-

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

However, I'm facing an issue where my dropdown is not functioning correctly. Instead of displaying as expected, it is showing all the options in a single line like this: https://i.sstatic.net/lePWG.png

htmlcssbootstrap-4

Answer №1

It appears that the classes and HTML should be structured in this way:

  <nav class="navbar navbar-expand-sm navbar-light bg-light">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      Dropdown
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">
        Action
      </a>
      <a class="dropdown-item" href="#">
        Another action
      </a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">
        Something else here
      </a>
    </div>
  </nav>

Answer №2

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
</style>
</head>
<body>
   
<div class="container">
  <h2>Creating Multi-Level Dropdowns</h2>
  <p>This example showcases the creation of a .dropdown-submenu class for multi-level dropdown menus (refer to the style section above).</p>
  <p>Please note that jQuery has been included to enable opening of the multi-level dropdown menus on click (see script section below).</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Explore
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New submenu <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Second level menu item</a></li>
          <li><a tabindex="-1" href="#">Second level menu item</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another submenu <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Third level menu item</a></li>
              <li><a href="#">Third level menu item</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>

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

Tips for incorporating border/outline/stroke into SVG elements using CSS

Currently, I am incorporating SVG elements into a webpage using D3js. However, I am facing challenges when it comes to styling these elements as typical CSS syntaxes like path { border: 3px solid green; } do not seem to work. Is there a way to apply bo ...

csssvgd3.jsborder

Avoiding the use of a particular URL when using this.router.navigate() in AngularJs

In my angularJS registration form, I am using a bootstrap template for the design. The URL path to access the form page is http://localhost:4200/signup <form method="post" (submit)='register(username.value,email.value,password.value)'> ...

htmlcssangularjsbootstrap-4

Creating a text shadow effect with text that has a transparent color

I am attempting to replicate the design shown below using the CSS text-shadow property, but I keep getting a solid color outcome. I have tried using an rgba value of 255,0,0,0.0 for the font-color and text-shadow like this: text-shadow: -1px -1px 0 #0 ...

css

Restricting CSS Background Image Width to 960 Pixels

My CSS style is causing my background image to span across the whole screen instead of repeating within the 960px width of the body. body { width:960px; margin: 10px auto 10px auto; background-image:url(logo.png),url(backgroundimage.jpg); ...

htmlcss

Issue with enabling overflow-y: scroll within a Bootstrap Modal

I've implemented a modal using the Bootstrap library that contains multiple lists populated through Ajax search requests. These lists have a fixed size and utilize the CSS property overflow-y: scroll to accommodate a large number of elements without a ...

htmljquerycssbootstrap-5

Guide on including a JavaScript file in HTML during execution on Node.js

I have developed a basic nodeJs server with the following code in my server.js file: var http = require('http'); var fs = require('fs'); var path = require('path'); var server = http.createServer(function(req, resp){ // P ...

javascripthtmlnode.js

Retrieve information from a cell containing HTML formatting

Is there a way for me to save a specific text from a cell in Google Sheets into a variable, and then use it to send an email with the text formatted within an HTML table? For example: Cell in Google Sheets: "Lorem ipsum dolor sit amet. Ut tenetur a ...

htmlgoogle-apps-scriptgoogle-sheets

"Can anyone provide guidance on how to use Twig to read from a JSON file

I currently have a basic PHP file set up as follows: <?php // Loading our autoloader require_once __DIR__.'/vendor/autoload.php'; // Setting the location of our Twig templates $loader = new Twig_Loader_Filesystem(__DIR__.'/views& ...

phphtmljsontwig

Tips for concealing the final click (add) tab after it has been clicked and revealing the hidden (add) button when the user clicks on the remove button

I have created a form where users can add tests. Everything is working smoothly but I want the previous "Add Another Test" field to be removed when the user clicks on it and a new field to be shown. Everything is running well, but the issue is that when t ...

javascriptjqueryhtmlcss

Working with extensive amounts of HTML in JavaScript

Is there a way to dynamically load large amounts of HTML content in JavaScript? I'm struggling to figure out how to insert all the HTML content into the designated space within the JavaScript code. If anyone knows a different approach or solution, ple ...

javascriptjqueryhtml

Is it HTML True or False in the editor?

For the HTML template I'm working on, I want to implement a feature where users can toggle tags on and off easily. My idea is to make it as simple as setting a value to "true" or "false." Is there a way to achieve this within a single HTML file? ...

html

Receiving RSVP via email after sending out invitations

My dilemma lies in sending an invitation message via email to two individuals, complete with two link buttons offering the options to either Approve or Reject. The question now becomes: How can I track who has clicked on the Approve button? This way, I ca ...

phphtmlemailhtml-email

How can JQuery be utilized to extract the information stored in the "value" parameter of a chosen option?

I have a dropdown menu that dynamically populates its options with numbers. Here is the code for that: <select name="TheServices" id="services-selector"> <option value="" disabled selected hidden>Static Select ...

javascripthtmljquery

Navigational Menu in PHP

My goal is to have one link that retrieves data from a table with a specific value and another identical link that pulls data from the same table but with a different value. However, both dropdowns are displaying in the link. <div class="col-sm-9"> ...

phpjqueryhtmlcss

The email generated by Laravel does not conform to HTML formatting standards

After creating an email using markdown in Laravel, I noticed that the email content received was not displaying correctly. The HTML tags were not being rendered properly. You can view my email here. Any help on this issue would be greatly appreciated. I h ...

htmllaravelemail

Angular directive for concealing the 'ancestor' of an element

I have created a code snippet that effectively hides the 'grandparent' element of any '404' images on my webpage. Here is the code: function hideGrandparent(image){ image.parentNode.parentNode.style.display = 'none'; } < ...

javascripthtmlcssangularjsangularjs-directive

How can I prevent an image from moving in relation to other objects on a webpage using HTML?

I'm currently working on my HTML website and facing a layout issue. I have an image in the center of the screen, but I want to add text beside it on the right side. Every time I try to do this, the image moves down, which is frustrating. I'm not ...

htmlcss

Using JavaScript's document.write method to display HTML code, along with a variable retrieved from a Flash application

Can I ask two questions at once? Firstly, how can I achieve the following? document.write(' <div id="jwplayer"> <center> <div id='mediaplayer'></div> <script type="text/javascript"> jwplayer('mediapl ...

javascripthtmljwplayerrtmp

A guide to implementing lazy loading using BXSlider

I have implemented an image gallery using Bxslider, but I am facing an issue with the loading time as there are more than 15 images in each slide. To address this problem, I want to load images one by one when a particular slide appears. I came across an e ...

jqueryhtmlcssbxsliderlazy-loading

I'm having trouble getting jQuery UI's droppable to function properly. How can I troub

Recently, I created a drag and drop game to enhance my jQuery UI skills. However, I am facing an issue where the circle cannot be dropped on the square with the same color. Also, when it does work, the circle ends up behind the square instead of on top. It ...

javascriptjqueryhtml