I made a drop-down menu consisting of a HTML input/button and some more buttons as drop-down menu items. The menu is shown as soon as hovered over the main button

<div class="dropdown">
    <button id="dropdown-wifi" class="extended-button" onclick="showDropDown()">Available WiFi Hot Spots</button>
    <div id="ssid-dropdown" class="dropdown-content">
        <!-- drop-down menu items dynamically created by JavaScript -->
    </div>
</div>

This is the hover event in CSS:

.dropdown:hover .dropdown-content {
    display: block;
}

The JavaScript code that hides and later 'should' show again:

function showDropDown() {
    document.getElementById("ssid-dropdown").style.display = 'block';
}

function hideDropDown() {
    document.getElementById("ssid-dropdown").style.display = 'none';
}

Now, the drop-down menu is properly shown as soon as I hover over the main button. But when selecting an item, I call hideDropDown() to hide the menu even if not hovered outside of the items.

I notified that as soon as the hideDropDown() function is called, the following is added in the CSS window of Chrome's debug windows:

element.style {
    display: none;
}

I guess, that is a kind of CSS generated because my JavaScript function call of hideDropDown(). However, as soon as this element.stlye is occuring, the hovering/show of the drop-down menu doesn't work anymore.

Any ideas how to solve this issue?

I made a drop-down menu consisting of a HTML input/button and some more buttons as drop-down menu items. The menu is shown as soon as hovered over the main button

<div class="dropdown">
    <button id="dropdown-wifi" class="extended-button" onclick="showDropDown()">Available WiFi Hot Spots</button>
    <div id="ssid-dropdown" class="dropdown-content">
        <!-- drop-down menu items dynamically created by JavaScript -->
    </div>
</div>

This is the hover event in CSS:

.dropdown:hover .dropdown-content {
    display: block;
}

The JavaScript code that hides and later 'should' show again:

function showDropDown() {
    document.getElementById("ssid-dropdown").style.display = 'block';
}

function hideDropDown() {
    document.getElementById("ssid-dropdown").style.display = 'none';
}

Now, the drop-down menu is properly shown as soon as I hover over the main button. But when selecting an item, I call hideDropDown() to hide the menu even if not hovered outside of the items.

I notified that as soon as the hideDropDown() function is called, the following is added in the CSS window of Chrome's debug windows:

element.style {
    display: none;
}

I guess, that is a kind of CSS generated because my JavaScript function call of hideDropDown(). However, as soon as this element.stlye is occuring, the hovering/show of the drop-down menu doesn't work anymore.

Any ideas how to solve this issue?

• javascript
• css

• 1 Looks like multiple things are present here. Can you show us a minimal reproducible example that might help to repro this issue? – Praveen Kumar Purushothaman Commented Nov 16, 2017 at 21:30
• You can set css priority. like .dropdown:hover .dropdown-content { display: block !important; } – Shaybi Commented Nov 16, 2017 at 21:31
• you could also use visibility property to my best of knowledge. – Ahtisham Commented Nov 16, 2017 at 21:45

2 Answers 2

You can create class with name hide and add next css:

.hide {
  display:none;
}

Add or remove this class. This way is very simple

hello to my dear friend you can simply just use jquery like this :

$(".dropdown").show() OR $(".dropdown").hide()