title: 'Onmouseover' state reveals div; change area so div remains revealed
body: <p>I cannot write Javascript but I have a snippet that I'm adding into a web page. Currently, my code has a mouseover that will reveal a hidden div. However, there is navigation in the hidden div that will immediately disappear as the user tries to click on a link, as the user needs to move their mouse away from the original trigger to reach the navigation.</p>
  
  <p>Here is my Javascript: </p>
  
  <pre><code>&lt;script language="JavaScript"&gt;
      function toggle(id) {
          var state = document.getElementById(id).style.display;
              if (state == 'block') {
                  document.getElementById(id).style.display = 'none';
              } else {
                  document.getElementById(id).style.display = 'block';
              }
          }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is my HTML: </p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li class="ovr"&gt;&lt;a href="#" onmouseover="toggle('hidden1');" onmouseout="toggle('hidden1');"&gt;Overview&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  
  &lt;div class="container"&gt;
  &lt;div id="hidden1"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#description"&gt;Description&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#objectives"&gt;Objectives&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#semestertopics"&gt;Semester Topics&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#greenteaching"&gt;Green Teaching&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#howtodowellinthiscourse"&gt;How to Do Well in this Course&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If my question has already been answered, a pointer in the right direction would be much appreciated - I don't have all the right vocabulary to do the correct searches.</p>
  
  <p>Thank you!</p>