javascript - How to hide submenu when user clicks option, but still display when user hovers over menu -

currently submenu displays on hover , hides when click on submenu item. great. problem is, when hover on top level menu doesn't display submenu after click on submenu item.

i submenu hide when user clicks submenu item, want display again if user hovers on top level menu again. ideas on how fix this? plain js or css solution this, no jquery please.

i did try google this, found people trying permanently hide sub menu item clicked. read innerhtml remove child elements moved item text buttons rather li elements , changed 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: 0.2s;    -moz-transition: 0.2s;    -ms-transition: 0.2s;    -o-transition: 0.2s;    transition: 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 {    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>

sorry kinda butchered js , html bit, 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; }