Hover creates a duplicate dropdown menu

I'm facing an issue with the hover effect on my Metronic dropdown menu. When I hover over the menu button, everything works fine, but when I move to the options in the menu, it turns white. I suspect this might be due to two button activations happening simultaneously or one activation getting deactivated upon entering the menu options.

https://i.sstatic.net/IYsQcypW.png

The cursor is currently hovering over the menu button

https://i.sstatic.net/oTpsuvWA.png

The cursor is now over some option in the drop-down menu

Here is the code snippet:

<div class="d-flex align-items-center ms-1 ms-lg-3">
    <div class="menu menu-column menu-gray-600 menu-active-primary menu-hover-light-primary fw-semibold w-30px h-30px w-md-40px h-md-40px" data-kt-menu="true">
        <!-- Menu item -->
        <div class="menu-item menu-item-calendar" data-kt-menu-trigger="hover" data-kt-menu-placement="bottom-end">
            <!-- Menu link -->
            <a href="#" class="btn btn-icon btn-active-light-primary btn-custom w-30px h-30px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
                <span class="svg-icon svg-icon-1">
                    <svg width="24" height="24" viewBox="0 2 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <!-- SVG -->
                    </svg>
                </span>
            </a>
            <!-- Menu sub -->
            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-muted menu-active-bg menu-state-color fw-semibold py-4 fs-base w-175px" data-kt-menu="true">
                <!-- Menu item: Local -->
                <div class="menu-item px-3 my-0">
                    <a href="<?= site_url('calendar') ?>" class="menu-link px-3 py-2">
                        <span class="menu-icon svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <!-- SVG -->
                            </svg>
                        </span>
                        <span class="menu-title">Local</span>
                    </a>
                </div>
                <!-- Menu item: Outlook -->
                <div class="menu-item px-3 my-0">
                    <a href="#" id="botonOutlook" class="menu-link px-3 py-2">
                        <span class="menu-icon svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <!-- SVG -->
                            </svg>
                        </span>
                        <span class="menu-title">Outlook</span>
                    </a>
                </div>
                <!-- Menu item: Google -->
                <div class="menu-item px-3 my-0">
                    <a href="#" id="botonGoogle" class="menu-link px-3 py-2">
                        <span class="menu-icon">
                            <img src="assets/media/logos/gmanu.png" width="25" height="25" class="google-icon" />
                        </span>
                        <span class="menu-title">Google</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

I also have another dropdown menu that is already implemented and works as expected:

https://i.sstatic.net/8a6Z0CTK.png

https://i.sstatic.net/V083isut.png

The hover effect remains consistent even when navigating through the options.

Below is the code for this working dropdown menu:

<div class="d-flex align-items-center ms-1 ms-lg-3">
    <a href="#" class="btn btn-icon btn-active-light-primary btn-custom w-30px h-30px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
        <span class="svg-icon theme-light-show svg-icon-1">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- SVG -->
            </svg>
        </span>
        <span class="svg-icon theme-dark-show svg-icon-1">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- SVG -->
            </svg>
        </span>
    </a>
    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-muted menu-active-bg menu-state-color fw-semibold py-4 fs-base w-175px" data-kt-menu="true" data-kt-element="theme-mode-menu">
        <div class="menu-item px-3 my-0">
            <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="light">
                <span class="menu-icon" data-kt-element="icon">
                    <span class="svg-icon svg-icon-3">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <!-- SVG -->
                        </svg>
                    </span>
                </span>
                <span class="menu-title"><?= lang('General.light') ?></span>
            </a>
        </div>
        <div class="menu-item px-3 my-0">
            <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="dark">
                <span class="menu-icon" data-kt-element="icon">
                    <span class="svg-icon svg-icon-3">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <!-- SVG -->
                        </svg>
                    </span>
                </span>
                <span class="menu-title"><?= lang('General.dark') ?></span>
            </a>
        </div>
    </div>
</div>

Thank you all very much!

htmlcssdrop-down-menubootstrap-5metronic

Answer №1

Greetings,

With the assistance of my coworkers in the office, we have successfully identified the solution to the issue. The problem was due to the presence of 

data-kt-menu-trigger="hover"
in the Div of the <!-- Menu item -->, which inadvertently triggered the hover function once again.

After removing this element, the menu now functions as intended, similar to the other menus.

I want to express my gratitude to all who took the time to read my question and offer assistance. Wishing you all a wonderful day!

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 height of the first item in the navigation menu seems oddly disproportionate

I've been struggling for nearly an hour to make my navigation menu visually appealing. I'm utilizing Twitter Bootstrap's flat CSS menu. Oddly, the first item in the menu appears taller than all the other items in the list - you can see it h ...

htmlcsstwitter-bootstrap

Show the div in the right position for both desktop and mobile screens, utilize an accordion or consider shifting the div

My webpage is designed using bootstrap 4 and showcases images of our team members along with accordion functionality to display bios upon clicking the image. On a desktop screen, everything functions smoothly with four images of team members displayed in ...

htmlcssbootstrap-4accordion

The header tag will not align to the left with the content when placed next to a left-floating div

I have a challenge where I am attempting to insert content to the right of an unordered list while ensuring it stays aligned to the left of the list (which is floated to the left). Interestingly, when I add paragraphs and images, the alignment works perfec ...

htmlcssstylescss-floattext-align

ASP.Net & Ajax Fusion Login Interface

I am encountering an issue while creating a login page with HTML, AJAX, and ASP.NET. The data is being passed to the AJAX function successfully, but when I debug the ASP page, the username and password are showing up as NULL. The purpose of the code is to ...

javascriptasp.nethtmlajaxauthentication

Utilizing CSS grid to center one specific div, while aligning the remaining divs on the subsequent line

I need to create a pyramid structure within a parent div utilizing 4 child divs. The first child should be centered, with the remaining children positioned below in a second row. <style> .parent { width: 100%; display: grid; grid-template-co ...

htmlcsscss-grid

Tips for setting the aria-current attribute appropriately for the active breadcrumb item

While exploring the breadcrumb example in Bootstrap 5, I came across an interesting observation. <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#" ...

accessibilitybootstrap-5wai-aria

The CSS cursor style is taking precedence over the inline cursor style while dragging items in the list

I am currently utilizing the Nestable JS library and have a list of nestable items in my tree. I am trying to implement a cursor: pointer when hovering over them and a cursor: move when dragging. However, I am facing issues in getting this functionality to ...

javascriptjqueryhtmlcssjquery-ui

What is the best way to dynamically change the main content based on the sidebar option chosen in a React application?

https://i.sstatic.net/fkIyh.png Currently, I am in the process of creating the layout for the page similar to the image provided. When a user selects option A from the sidebar, my goal is to display the corresponding content on the same page without navig ...

javascripthtmlreactjstypescriptreact-router

Tips on how to apply CSS styles to a specific "div" card only?

I'm working on a project that involves using multiple templates, but I've run into issues with conflicting CSS links from different templates. I want to ensure that the CSS link from one template only affects a specific HTML card without impactin ...

htmlcssasp.net-mvc

Loading 3D models in Three.js from the cache

Every time my page reloads, the loader loads objects from the URL instead of cache. Is there a way to check if the resource is in cache and load it directly? Appreciate your help! ...

javascripthtmlthree.js

Employing jQuery for adding a class to the initial TD in every table row

Currently, I am dealing with a table structured like this: <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tablecontent"> <tr class="tablerow"> <td>This is the td I want to add a class to.</td> <td c ...

jqueryhtmlcssclasshtml-table

Unable to position a div alongside a fluid div with minimum and maximum widths

Within this container, there is a div. #leftBanner { height: 100%; background-color: #CCC; width: 22%; min-width: 245px; max-width: 355px; float: left; } This particular div doesn't cooperate when I try to float another div next to it. While I could ...

htmlcss

What is the best way to extend an inline-block element to cover the entire text line?

Let's talk about the scenario: https://i.stack.imgur.com/we05U.png In the image, there is a container (displayed as a div) with only one child - a span element. The goal is to introduce a second child that occupies the entire red space depicted in t ...

javascripthtmlcss

CakePHP allows developers to easily include images in their links using the `$this->Html->link` method. However, instead of generating HTML code for the image, it outputs ASCII characters

I can't seem to find the solution in the CakePHP 2.3.0 manual. I am trying to use $this->Html->link with $this->Html->image to create a clickable image. However, I'm encountering an issue where the ASCII rendering of quotes is being g ...

htmlcakephp

What is the best way to horizontally align three animated progress bars alongside images?

Check out this jsfiddle that shows a vertical alignment of the progress bars. How can I modify it to align them horizontally and centered? https://jsfiddle.net/bLe0jLar/ .wrapper { width: 100px; height: 100px; } .wrapper > #bar, #bar2, #bar3 { ...

javascripthtmlcssflexbox

Adding style using CSS to a dynamically generated table row in Vue.js

Currently, I am working with a table that dynamically generates rows using v-for: <table> <tr><th class='name'>Name</th><th>Surname</th></tr> <tr v-for='data in datas'><td class=&a ...

javascriptjqueryhtmlcssvue.js

"Utilize jQuery to target and highlight specific HTML elements when redirecting

I am working with a list of elements and I want to be able to redirect the focus to a specific element using a URL. <div id="20"></div> <div id="21"></div> <div id="22"></div> // example url http://localhost: ...

htmlcss

Cycle through a selection and generate an HTML element for each individual item within the collection?

My Model(Objectives) stores the necessary data for iteration. Below is its code in models.py: class Objectives(models.Model): target = models.CharField(max_length=50) description = models.TextField(max_length=300) time_left= models.DateField() ...

htmldjangodjango-modelsdjango-views

When utilizing media queries, the div element struggles to adjust to the width of the browser

I need assistance in making the left box and the right box stack vertically when viewed on a screen width of 600px or less. I have been able to achieve this for the navigation bar, but I am facing issues with implementing the same for the boxes. I have tri ...

css

What is the best way to paste plain text into a Textarea without any formatting?

A challenge I am facing in my project is related to copying and pasting text into a Textarea. When a user copies text, the style of the text is also inserted along with it. However, when the user manually types the text, it gets inserted correctly without ...

htmlcssreactjs