When attempting to access the submenu in Bootstrap 5 dropdown, it does not slide down as expected upon clicking

Why isn't the rest of the menu expanding downward when I select a submenu? The submenu is already selected, but it hides other items. How can I make it expand downwards?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6a9b6ab">[email protected]</a>/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1dcdcc7c0c7c1d2c39edad0dcddc0f3829d869d83">[email protected]</a>/font/bootstrap-icons.css" />
</head>

<body>
  <div class="dropdown border-top">
    <a href="#" class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
      <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
    </a>
    <ul class="dropdown-menu dropdown-menu-end text-small shadow">
      <li>
        <a class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" href="#">SubMenu</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Item 1</a></li>
        </ul>
      </li>
      <li><a class="dropdown-item" href="#">Settings</a></li>
      <li><a class="dropdown-item" href="#">Profile</a></li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aba6a6bdbabdbba8b989fce7fae7f8">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>

</html>

htmlcssdrop-down-menubootstrap-5

Answer №1

It might be more suitable to use a .collapse instead of a .dropdown for the submenu, particularly when paired with a .list-group. The .collapse maintains its position in the document flow and can animate its height between 0 and its normal size.

<!DOCTYPE html>
<html lang="en>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0d2dfdfc4c3c4c2d1c0f0859e819e83">[email protected]</a>/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0f0202191e191f0c1d40040e02031e2d5c4358435d">[email protected]</a>/font/bootstrap-icons.css" />
</head>

<body>
  <div class="dropdown border-top">
    <a href="#" class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
      <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
    </a>
    <ul class="dropdown-menu dropdown-menu-end text-small shadow">
      <li>
        <a class="dropdown-item dropdown-toggle" data-bs-toggle="collapse" href="#submenu">SubMenu</a>
        <div class="collapse list-group" id="submenu">
          <a class="list-group-item list-group-item-action" href="#">Item 1</a>
        </div>
      </li>
      <li><a class="dropdown-item" href="#">Settings</a></li>
      <li><a class="dropdown-item" href="#">Profile</a></li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2a0adadb6b1b6b0a3b282f7ecf1ecf3">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></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

What is the best way to include CSS in a CodeIgniter project?

I am facing an issue with loading a CSS file in Codeigniter. It seems like there might be something wrong with my code. Can someone help me understand how to properly load a CSS file in Codeigniter and possibly identify any errors in my current code? < ...

phphtmlcsscodeigniter

Can a rotation animation be incorporated into an image in next.js when it is clicked?

Looking to enhance a next.js image with an animation? How about making it rotate 360 degrees upon each click? Despite my attempts at toggling classes, I can't seem to achieve the desired outcome. Any guidance would be greatly appreciated. Thank you in ...

javascriptcssimageanimationnext.js

Having difficulty adjusting the margin-top for the menu div

Why am I unable to apply margin to my a links within the div identified by id="menu". I can successfully implement margin-left, but when attempting to use margin-top or margin-bottom, it does not work as expected. I wish to adjust the position o ...

csshtmlalignmentmargin

Looking to retrieve the value of an input element within an ng-select in Angular 6?

Currently, I am working on a project where I aim to develop a customized feature in ng-select. This feature will enable the text entered in ng-select to be appended to the binding item and included as part of the multiselect function. If you want to see a ...

javascripthtmlangulartypescriptangular-ngselect

Maximizing efficiency in Office Automation programming by choosing individuals proficient in Javascript and PHP

I am seeking a solution where upon selecting a department checkbox, the employees belonging to that department will be displayed in the second div. This way, I can easily select an employee and have their information displayed in a separate section. I al ...

javascriptphphtmlajax

Design a div in the shape of a trapezium with clipped overflow

Is there a way to create a trapezium using CSS/Html/Canvas? I have attempted to do so, but my current method is messy and not practical. div { width:0; margin-left:-1000px; height:100px; border-right:1000px solid lightblue; border-top:60px solid tra ...

javascriptjqueryhtmlcss

The usage of the bootstrapTable() function creates a gap below the displayed table information

Currently, I am working on incorporating a table into my webpage that will load data from an API. After some research, I found a Bootstrap table library to assist with this task. However, I have encountered an issue with setting the table height dynamicall ...

javascripthtmlcsstwitter-bootstrapbootstrap-table

Click the div to fold it

I would like the div to fold down when clicked on and then fold back up when clicked again. Here is my jQuery code: $(".fold_reply").click(function() { if ($('.reply').css('display') === 'none') { $(".reply").sh ...

javascriptjqueryhtmlcssfold

The forecast button seems to be malfunctioning. Each time I attempt to click on it, a message pops up saying, "The server failed to comprehend the request sent by the browser (or proxy)."

Even though I provided all the necessary code, including the Flask app, predictionmodel.py, and HTML code, I am still encountering an error when running it locally after clicking submit. The browser (or proxy) sent a request that this server could not un ...

pythonhtmlmachine-learningflasknltk-trainer

Which browser accurately parses the CSS Box Model: Firefox, Internet Explorer, or Chrome?

Padding behaves differently in Firefox and IE. IE adds padding to the height and width, while Firefox ignores it. What is the correct interpretation of this behavior, and how can we achieve a consistent look across all browsers? Are there differences in ...

htmlinternet-explorerfirefoxcss

Combine jQuery and CSS to create a scrollable and extended fixed header

I am experiencing an issue where the header is fixed when scrolled down, but when I scroll back up to the top, it detaches and becomes unfixed again. How can I make the header stay fixed for a prolonged period of time? Are there any specific adjustments I ...

jquerycss

When attempting to call an XML node with JavaScript in an HTML file within Dreamweaver, the functionality works as expected. However, upon testing the same code on a server

As a beginner in Javascript, I am attempting to use document.write to display some XML data in an HTML format. Below is the code that I have been working on: <script> function loadXMLDoc() { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest( ...

javascripthtmlxmlinnerhtml

What methods can be used to strategically incorporate gray into both the left and right sides of a page design?

I'm currently working on an asp.net MVC layout page and I'm trying to create a layout where the left side and right side are gray. However, I'm not sure how to achieve this using HTML, CSS, or Bootstrap. I specifically need to know how to ...

javascripthtmljquerycssbootstrap-4

When viewing HTML emails in dark mode on iOS Gmail, the CSS appears to be inverted

While sending an HTML email from a nodejs app, I encountered an issue with Gmail on iOS where elements with background-color or color properties were getting reversed. This was most noticeable on black and white elements. Despite consulting various guides ...

htmlcssnode.jsemailgmail

Using jQuery for Page Navigation - incorporating an active class in a specific section of a fresh webpage

One of my clients recently requested that I implement sectional page navigation, and the code below successfully addresses this request. When a user triggers an internal page link or uses the sectional navigation (.menu), the state of the sectional navigat ...

jqueryhtmlasp.net

Troubleshooting: Custom icons not displaying in Next.js application

Every time I attempt to use icons that I have loaded into my source code, I keep getting this default icon displayed: https://i.sstatic.net/AWhcW.png I'm uncertain about what exactly is causing this issue. Here is the layout of my file tree for ref ...

htmlcssreactjsnext.js

How well does position:fixed function in Internet Explorer versions 7, 8, and 9?

Before diving into using position:fixed, I'd like to confirm if it works well in Microsoft browsers. Thank you. ...

cssinternet-explorer

Optimize your texture loading process by dynamically swapping out low resolution textures with high resolution ones to enhance overall visual quality

In my current ThreeJS project, I have encountered an issue when trying to swap one texture with another. The problem arises when the UV's become completely distorted after the texture switch. Below is the snippet of code that showcases how I am attemp ...

javascripthtmlthree.jsgltf

Move the <div></div> element to the bottom of the webpage and center it

My HTML includes a <div>...</div> section that serves as a toolbar. Is there a method to position this section at the bottom of the webpage (document, not viewport) and align it to the center? ...

javascripthtmlcssajax

Ways to position a div at the center of a page

I've encountered a challenge while creating a mobile website. Within the main div, there are three nested divs. Initially, I aimed for left alignment but now desire to center-align these three divs on the page. Essentially, if the device screen is wid ...

csshtmlcenteralignment