Creating a three-tiered navigation menu using Bootstrap 4

I am struggling with adding a 3-level dropdown menu to my website. My HTML code seems correct, and I have added the necessary CSS styles, but the last dropdown menus are appearing in the wrong place.

<li class="nav-item dropdown">
                    
                    <a href="https://fotografika.hu/kategoria/14/ajandektargy-nyomtatas"data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle" title="Ajándéktárgy nyomtatás">Menu 1</a>
                        <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="https://fotografika.hu/kategoria/15/ajandektargy-nyomtatas/bogre-nyomtatas" title="Bögre nyomtatás">Menu 2</a> 
                                                    
                                                        <ul class="dropdown-menu">
                                                            <li><a class="dropdown-item" href="https://szakkereskedo.hu/kategoria/137/betonadalekszerek/folyositok" title="Folyósítók">Menu 3</a> </li>
                                                              <li><a class="dropdown-item" href="https://szakkereskedo.hu/kategoria/137/betonadalekszerek/folyositok" title="Folyósítók">Menu 3</a> </li>
                                                              <li><a class="dropdown-item" href="https://szakkereskedo.hu/kategoria/137/betonadalekszerek/folyositok" title="Folyósítók">Menu 3</a> </li>
                                                              <li><a class="dropdown-item" href="https://szakkereskedo.hu/kategoria/137/betonadalekszerek/folyositok" title="Folyósítók">Menu 3</a> </li>
                                                        </ul>
                                                    
                                                    </li>
                                            <li><a class="dropdown-item" href="https://fotografika.hu/kategoria/16/ajandektargy-nyomtatas/polo-nyomtatas" title="Póló nyomtatás">Póló nyomtatás</a> </li>
                                            <li><a class="dropdown-item" href="https://fotografika.hu/kategoria/17/ajandektargy-nyomtatas/baba-ruha-nyomtatas" title="Baba ruha nyomtatás">Baba ruha nyomtatás</a> </li>
                                            </ul>
                    
                    </li>

Some additional CSS styling:

.dropdown-submenu .dropdown-menu { top: 0; left: 100%; }
.dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: 1.425em;
}

If you would like to see the issue in action, please visit the site here. Simply hover over the Menu 1 item to observe the problem.

Any help or guidance on resolving this would be greatly appreciated!

htmlcssbootstrap-4drop-down-menu

Answer №1

The modification made was changing the dropdown-menu to dropdown-submenu within the <ul> element, which is evident in the code snippet below. Hopefully, this adjustment resolves the issue!

<li class="nav-item dropdown">
                <a href="https://fotografika.hu/kategoria/14/ajandektargy-nyomtatas" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle" title="Ajándéktárgy nyomtatás">Menu 1</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <li class="dropdown-submenu"><a class="dropdown-item" href="https://fotografika.hu/kategoria/15/ajandektargy-nyomtatas/bogre-nyomtatas" title="Bögre nyomtatás">Menu 2</a> 
                            <ul class="dropdown-submenu"> <!-- I changed this to dropdown-submenu -->
                                <li><a class="dropdown-item" href="https://szakkereskedo.hu/kategoria/137/betonadalekszerek/folyositok" title="Folyósítók">Menu 3</a> </li>
                                  <li><a class="dropdown-item" href="https://szakkereskedo.hu/kategoria/137/betonadalekszerek/folyositok" title="Folyósítók">Menu 3</a> </li>
                                  <li><a class="dropdown-item" href="https://szakkereskedo.hu/kategoria/137/betonadalekszerek/folyositok" title="Folyósítók">Menu 3</a> </li>
                                  <li><a class="dropdown-item" href="https://szakkereskedo.hu/kategoria/137/betonadalekszerek/folyositok" title="Folyósítók">Menu 3</a> </li>
                            </ul>
                        </li>
                        <li><a class="dropdown-item" href="https://fotografika.hu/kategoria/16/ajandektargy-nyomtatas/polo-nyomtatas" title="Póló nyomtatás">Póló nyomtatás</a> </li>
                        <li><a class="dropdown-item" href="https://fotografika.hu/kategoria/17/ajandektargy-nyomtatas/baba-ruha-nyomtatas" title="Baba ruha nyomtatás">Baba ruha nyomtatás</a> </li>
                    </ul>
                
                </li>

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

The Angular Ivy strictTemplates error message states that the type 'Event' cannot be assigned to the type 'InputEvent' parameter

I'm feeling lost trying to figure out what's wrong with this code snippet: <input #quantity type="number" matInput formControlName="quantity" (input)="onQuantity($event, i)" placeholder="Quantity"/> onQuantity(event: InputEvent, i: number ...

htmlangulartypescriptangular-ivy

Navigate to a specific section within a div

I am currently developing a web chat application in next.js and have added an emoji picker button. However, when the button is clicked, the emoji menu only appears after scrolling down. I attempted to use scrollIntoView() but it did not work as expected. ...

javascriptcssreactjsscrollnext.js

Simple Way to Modify Color of Active Page Link - HTML, CSS, and JavaScript

I found a helpful example on how to change link colors for the current page here. Here is the script I added: <script> // current page highlight $(document).ready(function() { $("[href]").each(function() { if (this.href == window.l ...

javascriptjqueryhtmlcsshyperlink

Steps for adjusting the matMenuTriggerFor area so it only triggers when hovering over the arrow

Hello there! I'm currently working on adjusting the trigger area for opening the next menu panel. Right now, the next menu panel opens whenever I hover over either the title or the arrow. However, my goal is to have the menu open only when I hover ove ...

javascripthtmlcssangular

Attempting to transfer various variables from several windows using AJAX

Is it possible to pass multiple variables from two different windows into the same PHP script? If not, what would be the best approach to take? Thank you. verifyemail.html <script type = "text/javascript" src = "js/js_functions.js"></script> ...

javascriptphpjqueryhtmlajax

What is the best way to compare input to 2 distinct patterns in order to produce 2 separate error messages accordingly?

Is there a way to use HTML and angular to validate input against two patterns and generate two different inline error messages? The "pattern" attribute in the input tag doesn't seem to work for this. For instance, I need to validate if the input star ...

htmlangular

Jekyll latex not displaying on the remote server, despite being visible on the local server

Why isn't the Jekyll latex showing up on the remote site but appears locally? Currently using the Jekyll minima theme. ...

htmlcssrubygithubjekyll

Creating dynamic and interactive web pages can be achieved by utilizing either $_POST or $_GET with Modal,

In the snippet below, you'll find the HTML code that pulls an array of 6 objects from a database and displays them in a Bootstrap row successfully. <div class="row products"> <?php while($product = mysqli_fetch_assoc($featured)) ...

javascriptphpjqueryajaxhtml

Is there a way to upload multiple files using expressjs?

I'm looking for a way to efficiently send multiple files, including an entire directory, so that I can access them in another JavaScript file called from an HTML file. const app = require("express")(); const http = require("http"). ...

javascripthtmlnode.jsexpress

Populate the dropdown menu with data from a JSON file

Recently, I created a custom JSON file and wanted to populate a select>option using this data. However, I encountered an error message saying: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/.../p ...

javascripthtmljqueryjsonajax

What is the method to adjust the opacity of a background in CSS without affecting the entire container?

Although it seems simple, I am trying to design a website background with a container that has semi-transparent properties. When I include opacity: 0.5; within the #content code, the entire container, along with its content and text, becomes transparent. ...

css

Error encountered in React JS: Anticipated input was "CALC", "dimension", "number", but received unexpected end of input. CompileError originates from undefined CSS selector

After completing my entire project, I encountered an error while running yarn build. The error message from Yarn is as follows: Parse error on line 1: ^ Expecting "CALC", "LPAREN", "ADD", "SUB", "FUNCTION" ...

javascriptcssnode.jsreactjsyarnpkg

Creating a 3-column grid in React using the map function is a simple and efficient way

Looking to arrange my cards in a specific grid pattern: [] [] [] [] [] [] [] [] [] ... ... Facing an issue with rendering items using the map function. I've attempted a solution, but it's not working as expected. To create a new row for every in ...

javascriptarraysreactjsbootstrap-4

<Select> Placeholder customization

For my react project, I am utilizing material-Ui and I am looking to have a placeholder that stands out by having grey text instead of black when compared to the selected item. <Select name="answer" value={values.answer} onChange={handleChange} onBlur= ...

javascriptcssreactjsmaterial-ui

Can you explain how the Facebook Like button code functions and how I can create a similar feature on my own platform?

I have a website with 250 different items, each containing its own Like button using the standard Facebook "Like" code: div class="fb-like" data-href="http://www.mywebpage.com/myproductpage" data-send="false" data-layout="button_count" data-width="80" dat ...

javascriptclasshtmlfacebook-like

Updating the text of a Mat-Label dynamically without the need to reload the page

In my application, there is a mat-label that shows the Customer End Date. The end date is fetched initially through a GET request to an API. Let's say the end date is 16-05-2099, which is displayed as it is. There is also a delete button implemented f ...

javascripthtmlangulartypescriptrest-client

Assigning multiple identifiers to a single element

Multiple posts have emphasized the importance of using an ID only once. But, I'm facing a situation where I need to pass 2 PHP variables to my JavaScript. I initially thought of using document.getElementById, but since IDs must be unique, this approa ...

javascriptjqueryhtmlajax

Highest Positioned jQuery Mobile Section

Requesting something a bit out of the ordinary, I understand. I currently have a jQueryMobile page set up with simplicity: <div data-role="page" class="type-home" id="home"> <div data-role="header" data-theme="b"> <h1>Our To ...

javascriptjqueryhtmljquery-mobile

Triggering OnClick() more than once may result in the function failing to execute as intended

My dilemma involves a table of cells where clicking a cell triggers an event. I need to dynamically add cells, so I plan to call OnClick again on all rows. But when I do so for the second time, cells that have already had OnClick called twice stop firing a ...

javascriptjqueryhtml

JQuery may be successfully loaded, but it is not functioning as intended

Just started dabbling in JQuery (I'm a newbie) but I'm having trouble getting it to work! Initially, it worked a couple of times but then suddenly stopped working (pretty strange). I made some changes and now it doesn't work at all. JQuery a ...

javascriptjqueryhtmlcss