title: css hover drop down menu disappears when trying to select menu option
body: <p>I have been searching for a fix for my code for a while now. </p>
  
  <p>I have a drop down menu that displays the content of the menu after you hover over a static object, however when you attempt to select one of the items (you move your mouse off of the static object) the items disappear (are set back to display: none)</p>
  
  <p>my code is as follows:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="menuContainer"&gt;
      &lt;div class="menuItem first"&gt;
          &lt;div class="settingsIcon"&gt;&lt;/div&gt;
          &lt;div class="text"&gt;Account Settings&lt;/div&gt;
          &lt;div class="downArrowIcon"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="settingsMenu"&gt;
          &lt;div class="menuItem"&gt;Manage clients&lt;/div&gt;
          &lt;div class="menuItem"&gt;Manage specials&lt;/div&gt;
          &lt;div class="menuItem"&gt;Manage users&lt;/div&gt;
          &lt;div class="menuItem"&gt;Logout&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;';    
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div#menuContainer div:hover + div#settingsMenu{
      display: block;
      position: relative;
      z-index: 100;
  }
  
  div#menuContainer div#settingsMenu{
      display: none;
      width: 100%;
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>