Html Question posted in
Some basic documentation can be found here.

Html – Dropdown menu duplicates Hover

I have a problem with the hover event in my metronic dropdown menu, when I have the cursor over the menu button the hover is correct, but when entering the options the menu turns white, I suppose it may be caused by them being launched two button activations at the same time but when you delete one or the other it still happens or the activation is deactivated when entering the menu options.

first hover

The cursor is over the menu button

second hover

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

This is the code:

<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 have this other drop-down menu that was already done and works correctly:

first Hover menu 2

second Hover menu 2

the first hover is maintained when entering the options.

This is the code:

<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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Good morning,

    My office colleagues have helped me find the solution, the error was the value data-kt-menu-trigger="hover" in the Div of the <!-- Menu item --> which launched the hover function again.

    I have removed it and it now works like the other menu

    Thank you very much to all of you who have read my question and tried to help me, have a good day!


  2. 0

    Check Your Css File For A Problem In It To Make Us Answer,

    But This May Become The Solution :

    Make An External Div With A Class And Put A Function In Javascript To Show Or Hide It.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search