The dropdown menu with Bootstrap's <li> sub menu is not expanding as expected

<li class="dropdown">
                <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">Utilitas<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a class="dropdown-item" href="user.php?bagian=list&hal=1">Master User</a></li>
                    <li><a class="dropdown-item" href="ms_pejabat.php?bagian=list&hal=1">Master Penanda Tangan</a></li>
                    <li><a class="dropdown-item" href="tipe.php?bagian=list&hal=1">Master Tipe & NJKB</a></li>
                    <li><a class="dropdown-item" href="chating.php?bagian=list&hal=1">Chat Room</a></li>
                    <li><a class="dropdown-item" href="usersms.php?bagian=list&hal=1">Super User SMS Gateway</a></li>
                    <li><a class="dropdown-item" href="runningtext.php?bagian=list&hal=1">Running Text</a></li>
                    <li><a class="dropdown-item" href="upload.php?bagian=list&hal=1">Upload Data</a></li>
                </ul>
            </li>
cssbootstrap-4drop-down-menuhtml-listssubmenu

Answer №1

Everything in your code was functioning perfectly. Please make sure to include the Bootstrap script before closing the body tag.

Please note: This recommendation is based on the version you are using.

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

Using div tags may cause rendering issues

I am trying to use multiple div tags with webkit borders, but for some reason only the one called 'Wrapper' is displaying properly. Here is my code: .wrapper { margin: 20px auto 20px auto; width: 800px; background: url('images/background_1. ...

csshtmltags

Alignment of text in a stationary element's location

I'm working on implementing a feature for an online shop where new items are added to the cart, and I want to display the number of new items added. However, I am facing a challenge in centering the text that displays the number, especially when the n ...

htmlcss

Currently focusing on improving the responsiveness of the navigation bar and grid layout

I'm facing a new challenge I can't seem to crack: Despite setting my grid boxes to be responsive with 1fr column and (6, fr) row, they are displaying poorly on mobile devices. Additionally, my navbar remains fullwidth and mobile-like even when i ...

htmlcss

Issue with pop-up functionality on web page using HTML, CSS, and JavaScript

Recently, I created a unique popup using HTML. You can see the complete code (excluding CSS) here: https://codepen.io/nope99675/pen/BawrdBX. Below is the snippet of the HTML: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

javascripthtmlcsswebencoding

How to set a custom background image for the Django admin panel

I am struggling to display a background image in the Django admin site. Despite researching multiple solutions, none of them seem to work for me. All I want is for the background to be visible behind the admin site. I have a file named base_site.html. {% ...

cssdjangoadmin

Enhance the appearance of the <td> <span> element by incorporating a transition effect when modifying the text

I need help with creating a transition effect for a span element within a table cell. Currently, when a user clicks on the text, it changes from truncated to full size abruptly. I want to achieve a smooth growing/scaling effect instead. You can view an exa ...

javascripthtmljquerycss

What is the process for displaying or hiding a large image when clicking on thumbnail images?

How can I toggle the display of a large image by clicking on thumbnails? This is what I am looking for: Check out this JSFiddle version http://jsfiddle.net/jitendravyas/Qhdaz/ If not possible with just CSS, then a jQuery solution is acceptable. Is it o ...

javascriptjquerycssmobile-safari

Guide to aligning text to the right using the text-muted class

I'm attempting to align the text-muted class to the right side of the page. I've tried floating it right, pulling it right, but nothing seems to be working. <table class="table table-bordered"> <tbody> <tr> < ...

htmlcssbootstrap-4

Utilizing jQuery's POST Method to Fetch JSON Data on a Website

I've developed a Java REST API and now I want to retrieve JSON data on my website (which is built using HTML & CSS) by utilizing jQuery. The method to be used is POST, and here is the structure of my JSON: { "sessionID" : "25574", "interactiv ...

jqueryhtmlcssjsonrest

"Stuck: CSS Div Transition Effect Refuses to Cooper

I am looking to incorporate a transition on my div when it is clicked. I've tried using jQuery with this example: http://jsfiddle.net/nKtC6/698/, but it seems to not be working as expected. So, I want to explore another example using CSS: http://jsfid ...

jquerycss

Troubleshooting: Unable to Display Collapsing Navbar in Bootstrap 5 When Toggler is Pressed

My attempt at creating a collapsing navbar isn't working as expected, and I'm struggling to identify the issue. I have set up a collapse toggler that should target #navbar1. However, when I shrink the page, the Navbar collapses, the .navbar-togg ...

cssbootstrap-5

Limiting the size of textboxes in Twitter Bootstrap

I am currently working with bootstrap text boxes in the following manner: <div class="row"> <div class="col-lg-4"> <p> <label>Contact List</label> <select class="form-control" id="list" name="li ...

htmlcsstwitter-bootstraptextbox

What steps can I take to use CSS to disable a webpage?

Is there a way to create a disabled web page using CSS where users cannot click on any content and only view the content below the screen? ...

css

The iframe is not large enough to contain all the HTML content

I'm encountering a problem with a website I'm currently developing - specifically, I am struggling to embed an HTML document into an iframe in a manner that fills the entire page. Additionally, I am utilizing Angular to retrieve the HTML document ...

javascriptcssangularhtml

Generating DOM elements at specific intervals using Jquery

I am looking to dynamically create 1 div container every x seconds, and repeat this process n times. To achieve this, I have started with the following code: $(document).ready(function() { for (var i = 0; i < 5; i++) { createEle(i); } }); f ...

javascriptjqueryhtmlcss

How can this be written in a shorter amount of CSS code?

Seeking a more optimized solution, I am attempting to write CSS transitions for five different elements (medals/badges). Is there a way to achieve the same effect with less code? Below is the current code: #nav .badges { float:left; height: 173px; width: ...

css

How to Align Two HTML Forms Using CSS

I've been experimenting with various methods, but I'm still unable to achieve the desired outcome. Currently, my setup looks like this: https://i.sstatic.net/fUXKr.png However, what I really want is something more like this: https://i.sstatic ...

htmlformscss

Identify the CSS class for the ionic component on the webpage

Currently, I am in the process of developing an application using ionic 2 and angular 2. Within this app, I am utilizing the ionic 2 component known as ModalController. Unfortunately, I have encountered a challenge when attempting to adjust the size of th ...

javascriptcssangulartypescriptionic2

Switch out the arrow icon in the dropdown menu with an SVG graphic

Looking for a way to customize the dropdown caret in a semantic-ui-react component? Here's how it currently appears: https://i.sstatic.net/GpvfC.png <Dropdown className="hello-dropdown" placeholder="Comapany" onChange={th ...

javascripthtmlcssreactjssvg

I encountered an issue with my h3 element's margin not being applied properly when I attempted to add

I'm facing an issue with the margin for <h3> tag in my HTML code. I want to create some space between the form and the h3 element. Here is the CSS: *{ margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } body{ background-ima ...

htmlcss