title: Need cursor to stay on main element of drop down menu
body: <p>I have posted my code for a drop vertical drop down menu. Everything works great except for when I mouse from one navigation button to the next. As you move down the the menu and the mouse hovers over the button a drop down menu appears. You can move down through this menu just fine. My problem comes when I go to the next main button. The old menu pops back and then the new one pops up and the mouse is in the middle of the new drop down menu. I want it to stay with the main button of the drop down menu until the user moves it again. here is my code, It can be copied and pasted and works just fine to give an example of what i'm talking about </p>
  
  <p>Thanks</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Page Title&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  
  &lt;style type="text/css"&gt;
      body
      {
          background: grey;
      }
      .menu 
      {
          width: 120%;
          display: block;
          float: right;
      }
  
      .menu ul
      {
          list-style: none;
      }
  
      .menu a
      {
          color: #000000;
          display: block;
          cursor: pointer;
          background: #808080;
          border: 1px solid #000000;
          padding: 6px 2px 6px 2px;
          font-size: small;
          text-align: center;
          text-decoration:none;
          font-weight: bold;
          width: 80%;
          margin: auto; 
  
          -webkit-border-radius: 4px 4px 4px 4px;
          -moz-border-radius: 4px 4px 4px 4px;
          border-radius: 4px 4px 4px 4px;
  
          -webkit-box-shadow: inset -2px -2px 2px 2px #181818;
          -moz-box-shadow: inset -2px -2px 2px 2px #181818;
          box-shadow: inset -2px -2px 2px 2px #181818;
      }
  
      .menu a:hover
      {
          color: #ffffff;
      }
  
      .menu a:active
      {
          -webkit-box-shadow: inset 1px 1px 1px 1px #181818;
          -moz-box-shadow: inset 1px 1px 1px 1px #181818;
          box-shadow: inset 1px 1px 1px 1px #181818;
      }
  
      .subMenu a
      {
          color: #ffffff;
          cursor: pointer;
          background: none;
          border: none;
          font-size: .80em;
          text-align: left;
  
          text-decoration:none;
          font-weight: normal;
          width: 100%;
          margin-left: -20px;
  
          border-radius: 0px 0px 0px 0px;
          box-shadow: 0px 0px 0px 0px;
  
          /*
          border-bottom: 1px solid #000000;
          border-left: 1px solid #000000;
          */
  
      }
  
      .subMenu a:hover
      {
          color: #ffffff;
          background: #000000;
          font-size: .90em;
      }
  
      .menu ul ul li
      {
          display:none;
      }
  
  
      .menu li:hover ul li
      {
          display:block;
      }
  &lt;/style&gt;
  
   &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div style="width: 300px"&gt;
      &lt;div class="menu"&gt;
          &lt;ul&gt;
               &lt;li&gt;&lt;a href="index.htm" style="color: #ffffff"&gt;Home&lt;/a&gt;
                   &lt;div class="subMenu"&gt;
                       &lt;ul&gt;
                           &lt;li&gt;&lt;a href=index.htm#zombie&gt;What is a Zombie&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href=index.htm#zombieApoc&gt;What is the Zombie Apacolyspe&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                       &lt;br&gt;
                   &lt;/div&gt;
               &lt;/li&gt;
  
               &lt;li&gt;&lt;a href="surviveFirstNight.htm"&gt;Surviving First Night&lt;/a&gt;
                   &lt;div class="subMenu"&gt;
                       &lt;ul&gt;
                           &lt;li&gt;&lt;a href=surviveFirstNight.htm#firstNight&gt;What is First Night&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href=surviveFirstNight.htm#prepared&gt;Prepare/Planning&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href=surviveFirstNight.htm#survivalKit&gt;Zombie Survival Kit&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href=surviveFirstNight.htm#group&gt;Form a Group&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                       &lt;br&gt;
                   &lt;/div&gt;
               &lt;/li&gt;
               &lt;li&gt;&lt;a href="extendedSurvival.htm"&gt;Extended Survival&lt;/a&gt;
                   &lt;div class="subMenu"&gt;
                       &lt;ul&gt;
                           &lt;li&gt;&lt;a href=index.htm#zombie&gt;What is a Zombie&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href=index.htm#zombieApoc&gt;What is the Zombie Apacolyspe&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                       &lt;br&gt;
                   &lt;/div&gt;
               &lt;/li&gt;
  
               &lt;li&gt;&lt;a href="weapons.htm"&gt;Weapons&lt;/a&gt;
                   &lt;div class="subMenu"&gt;
                       &lt;ul&gt;
                           &lt;li&gt;&lt;a href=weapons.htm#meele&gt;Meele Weapons&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href=weapons.htm#firearms&gt;Firearms&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href=weapons.htm#projectile&gt;Projectile Weapons&lt;/a&gt;&lt;/li&gt;
                           &lt;!--&lt;li&gt;&lt;a href=weapons.htm#explosives&gt;Explosives&lt;/a&gt;&lt;/li&gt; --&gt;
                       &lt;/ul&gt;
                       &lt;br&gt;
                   &lt;/div&gt;
               &lt;/li&gt;
               &lt;li&gt;&lt;a href="humanElement.htm"&gt;Human Element&lt;/a&gt;
                   &lt;div class="subMenu"&gt;
                       &lt;ul&gt;
                           &lt;li&gt;&lt;a href=index.htm#zombie&gt;What is a Zombie&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href=index.htm#zombieApoc&gt;What is the Zombie Apacolyspe&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                       &lt;br&gt;
                   &lt;/div&gt;
               &lt;/li&gt;
               &lt;li&gt;&lt;a href="refMaterial.htm"&gt;Reference Material&lt;/a&gt;
                   &lt;div class="subMenu"&gt;
                       &lt;ul&gt;
                           &lt;li&gt;&lt;a href=index.htm#zombie&gt;What is a Zombie&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href=index.htm#zombieApoc&gt;What is the Zombie Apacolyspe&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                       &lt;br&gt;
                   &lt;/div&gt;
               &lt;/li&gt;
          &lt;/ul&gt;    
      &lt;/div&gt;  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>