Issue with the visibility of nested dropdown list on the website

Question

Issue with the visibility of nested dropdown list on the website

I am encountering an issue with a web page I am working on. On the menu bar, there is a button that triggers a dropdown list of components. These components have submenu items as well. Unfortunately, I am struggling to properly display this structure. I need assistance in setting up the main menu, its components, and their corresponding submenus. Below is the code snippet I have been experimenting with:

<ul id="menu-top" class="nav navbar-nav navbar-right">
<li><a href="dashboard.php" class="menu-top-active">DASHBOARD</a></li>

<li>
<a href="#" class="dropdown-toggle" id="ddlmenuItem" data-toggle="dropdown"> Categories <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="ddlmenuItem">
<ul class="dropdown-menu" role="menu" aria-labelledby="ddlmenuItem">North,/ul>
<li role="presentation"><a role="menuitem" tabindex="-1" href="add-category.php">Add Category</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="manage-categories.php">Manage Categories</a></li>

I want it to look like this: enter image description here

Here is a Fiddle for reference: Fiddle

html css bootstrap-4 bootstrap-5

Answer 1

Answer №1

Give this code a try:

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   

    <style>
        /* Custom styling */
        ul,
        #myUL {
            list-style-type: none;
        }

        /* Adjust margins and padding for the parent ul */
        #myUL {
            margin: 0;
            padding: 0;
        }

        /* Caret/arrow design */
        .caret {
            cursor: pointer;
            user-select: none;
        }

        /* Styling for caret/arrow using unicode */
        .caret::before {
            content: "\25B6";
            color: black;
            display: inline-block;
            margin-right: 6px;
        }

        /* Rotate icon when clicked (JavaScript) */
        .caret-down::before {
            transform: rotate(90deg);
        }

        /* Initial hidden state for nested lists */
        .nested {
            display: none;
        }

        /* Show nested list on caret/arrow click (JavaScript) */
        .active {
            display: block;
        }
    </style>


    <title>Hello, world!</title>
</head>

<body>
    <ul id="myUL">
        <li><span class="caret">Beverages</span>
            <ul class="nested">
                <li>Water</li>
                <li>Coffee</li>
                <li><span class="caret">Tea</span>
                    <ul class="nested">
                        <li>Black Tea</li>
                        <li>White Tea</li>
                        <li><span class="caret">Green Tea</span>
                            <ul class="nested">
                                <li>Sencha</li>
                                <li>Gyokuro</li>
                                <li>Matcha</li>
                                <li>Pi Lo Chun</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    
    <script>
        var toggler = document.getElementsByClassName("caret");
        var i;

        for (i = 0; i < toggler.length; i++) {
            toggler[i].addEventListener("click", function () {
                this.parentElement.querySelector(".nested").classList.toggle("active");
                this.classList.toggle("caret-down");
            });
        }
    </script>

</body>

</html>

Answer 2

Give this code a try:

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   

    <style>
        /* Custom styling */
        ul,
        #myUL {
            list-style-type: none;
        }

        /* Adjust margins and padding for the parent ul */
        #myUL {
            margin: 0;
            padding: 0;
        }

        /* Caret/arrow design */
        .caret {
            cursor: pointer;
            user-select: none;
        }

        /* Styling for caret/arrow using unicode */
        .caret::before {
            content: "\25B6";
            color: black;
            display: inline-block;
            margin-right: 6px;
        }

        /* Rotate icon when clicked (JavaScript) */
        .caret-down::before {
            transform: rotate(90deg);
        }

        /* Initial hidden state for nested lists */
        .nested {
            display: none;
        }

        /* Show nested list on caret/arrow click (JavaScript) */
        .active {
            display: block;
        }
    </style>


    <title>Hello, world!</title>
</head>

<body>
    <ul id="myUL">
        <li><span class="caret">Beverages</span>
            <ul class="nested">
                <li>Water</li>
                <li>Coffee</li>
                <li><span class="caret">Tea</span>
                    <ul class="nested">
                        <li>Black Tea</li>
                        <li>White Tea</li>
                        <li><span class="caret">Green Tea</span>
                            <ul class="nested">
                                <li>Sencha</li>
                                <li>Gyokuro</li>
                                <li>Matcha</li>
                                <li>Pi Lo Chun</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    
    <script>
        var toggler = document.getElementsByClassName("caret");
        var i;

        for (i = 0; i < toggler.length; i++) {
            toggler[i].addEventListener("click", function () {
                this.parentElement.querySelector(".nested").classList.toggle("active");
                this.classList.toggle("caret-down");
            });
        }
    </script>

</body>

</html>

Issue with the visibility of nested dropdown list on the website

Answer №1

Similar questions

Encountering a DateTime discrepancy with the date field

Tips for styling an inline list using CSS before revealing it with jQuery's .show method:

Is it time to shake up the location of your Toastr

Refreshed page causing hide/show div to reset

How can I stop an element from losing focus?

What is the method for integrating fingerprint recognition into a web application using either Laravel or Django?

Why isn't my Bootstrap affecting Angular?

Add PHP functionality to insert a jQuery array of select2 tags

Guide on connecting a URL with a generated ID to the <a href> element

Manipulating attribute values using Jquery

The error message is causing all blocks to change width. What steps can be taken to correct this issue

I'm seeking assistance in enhancing this code within tb for extracting values using JavaScript

Clicking outside the div will cause the div to be hidden

Gallery Pagination using JQuery is not working properly

Animate an image to the right when clicked, then return it to the left with a second click

Attempting to replicate the action of pressing a button using Greasemonkey

The img-fluid class is not properly adjusting the height of the image

What is the best way to invoke an HTML file using a jQuery function in a JavaScript file?

What are the reasons behind my item not triggering an alert even after I have created it, saved it, and attempted to alert it?

Unable to create a horizontal navigation bar