Kevin Powell - Community•8mo ago

Dropdown menu issue

The problem is, when I hover over the product link on a large screen > 1000px width, the dropdown works and shows the menus but when I reduce the screen width to <1000px and click the product link and dropdown is showing menus, it is also working fine, and now is the problem when I again go to the larger screen, and then hover over the product link, now it's not working, it is only working if I click on the product link. but I want to show dropdown menus using hover over, on screens with a width >1000px. how to solve it https://codepen.io/hamzacodepen951/pen/mdaNoME

Hamza Naeem

CodePen

Dropdown issue

...

6 Replies

Mannix•8mo ago

instead of adding inline style with display block toggle a class with it. Inline style will always win with css unless you use !important the problem is that you have display: none after clicking and it wins with the display: block on the hover in css

Hamza Naeem•8mo ago

I think I have not used inline styling any where Could you tell me where should I do modifications

Mannix•8mo ago

document.getElementById('productsDropdown').addEventListener('click', function(event) 
{
    var dropdown = this.querySelector('.dropdown');
    if (dropdown.style.display === 'none' || dropdown.style.display === '') 
    {
        dropdown.style.display = 'block';
    } 

    else{
        dropdown.style.display = 'none';
    }
    // Prevent the click event from reaching parent elements
    event.stopPropagation();
});

// Close the dropdown if the user clicks outside of it
document.addEventListener('click', function(event) 
{
    var dropdown = document.querySelector('.dropdown');
    if (dropdown && event.target.closest('.nav_item') !== dropdown.parentNode) 
    {
        dropdown.style.display = 'none';
    }
});

document.getElementById('productsDropdown').addEventListener('click', function(event) 
{
    var dropdown = this.querySelector('.dropdown');
    if (dropdown.style.display === 'none' || dropdown.style.display === '') 
    {
        dropdown.style.display = 'block';
    } 

    else{
        dropdown.style.display = 'none';
    }
    // Prevent the click event from reaching parent elements
    event.stopPropagation();
});

// Close the dropdown if the user clicks outside of it
document.addEventListener('click', function(event) 
{
    var dropdown = document.querySelector('.dropdown');
    if (dropdown && event.target.closest('.nav_item') !== dropdown.parentNode) 
    {
        dropdown.style.display = 'none';
    }
});

here you are adding an inline styles on click

Hamza Naeem•8mo ago

oh got it, I am very new to JS I copied this code because for now I wanted to work css and html removing .style would work?

Mannix•8mo ago

https://codepen.io/MannixMD/pen/ZEVgNOL

Hamza Naeem•8mo ago

Thank you so much, Mannix is there any way that for large screens I dont have to click outside to move the chevron icon back to its defualt position, note only for large screens not for small ons.

Gaming

Programming

Dropdown menu issue