当用户单击选项时如何隐藏子菜单，但当用户将鼠标悬停在菜单上时仍会显示

Question

Currently my submenu displays on hover and hides when I click on a submenu item. This is great. Problem is, when I hover back over the top level menu it doesn't display the submenu after I click on a submenu item.

I would really like for the submenu to hide when the user clicks a submenu item, but I want it to display again if the user hovers over the top level menu again. Any ideas on how to fix this? Would really like a plain JS or css solution to this, no jquery please.

I did try to google this, but all I found were people trying to permanently hide a sub menu item that was clicked. I also read that innerHTML would remove all child elements so I moved my item text into buttons rather than the li elements and changed it to innerText instead of innerHTML.

 function classSelect(profession) { document.getElementById('dropDownSelections').style.display = 'none'; document.getElementById('classMenuHeader').innerText = profession; } function toggleMenu() { document.getElementById('dropDownSelections').style.display = 'block'; } 

 .dropDownList { z-index: 1000; overflow: visible; position: absolute; } .dropDownList ul { text-align: left; display: inline; margin: 0; padding: 15px 4px 17px 0; list-style: none; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); overflow: visible; } .dropDownList ul li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: #fff; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; overflow: visible; } .dropDownList ul li:hover { background: #555; color: #fff; overflow: visible; } .dropDownList ul li ul { padding: 0; position: absolute; top: 48px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; overflow: visible; text-align: center; } .dropDownList ul li ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; overflow: visible; margin: 0; padding: 0; } .dropDownList ul li ul li:hover { background: #666; } .dropDownList ul li:hover ul { display: block; } .dropDownList a { text-decoration: none; display: block; height: 3em; padding-top: 1.5em; } .dropdownList input[type="button"] { margin: 0; padding: 0; border: 0; background: transparent; font-family: inherit; font-size: 1em; cursor: pointer; } 

 <div class="dropDownList"> <ul> <li onmoustover="toggleMenu();"><a href="#" id="classMenuHeader" onclick="return false;">Select Class</a> <ul id="dropDownSelections"> <li onclick="classSelect('item1');"> <input type="button" value="item1" /> </li> <li onclick="classSelect('item2');"> <input type="button" value="item2" /> </li> <li onclick="classSelect('item3');"> <input type="button" value="item3" /> </li> <li onclick="classSelect('item4');"> <input type="button" value="item4" /> </li> <li onclick="classSelect('item5');"> <input type="button" value="item5" /> </li> <li onclick="classSelect('item6');"> <input type="button" value="item6" /> </li> <li onclick="classSelect('item7');"> <input type="button" value="item7" /> </li> <li onclick="classSelect('item8');"> <input type="button" value="item8" /> </li> </ul> </li> </ul> </div> 

Answer 1

Sorry I kinda butchered your js and html a bit, but this should work

HTML

<div class="dropDownList">
  <ul id="classDropDownList">
      <li><a href="#" id="classMenuHeader">Select Class</a>
      <ul id="dropDownSelections">
        <li onclick="classSelect('item1');">
          <input type="button" value="item1" />
        </li>
        <li onclick="classSelect('item2');">
          <input type="button" value="item2" />
        </li>
        <li onclick="classSelect('item3');">
          <input type="button" value="item3" />
        </li>
        <li onclick="classSelect('item4');">
          <input type="button" value="item4" />
        </li>
        <li onclick="classSelect('item5');">
          <input type="button" value="item5" />
        </li>
        <li onclick="classSelect('item6');">
          <input type="button" value="item6" />
        </li>
        <li onclick="classSelect('item7');">
          <input type="button" value="item7" />
        </li>
        <li onclick="classSelect('item8');">
          <input type="button" value="item8" />
        </li>
      </ul>
    </li>
  </ul>
</div>

Javascript

document.addEventListener("DOMContentLoaded", function(event) {

    document.getElementById('classDropDownList').onmouseover = function(){
        document.getElementById('dropDownSelections').style.display = 'block';
    }

    document.getElementById('classDropDownList').onmouseout = function(){
        document.getElementById('dropDownSelections').style.display = 'none';
    }

});

function classSelect(profession) {
  document.getElementById('dropDownSelections').style.display = 'none';
  document.getElementById('classMenuHeader').innerText = profession;
}