title: How to make div stay visible when hovering on it
body: <p>I have a menu that contains a button, and if you hover on it a "popup" appears above it.
  My problem is that i want the div to be visible if the user moves the mouse over to the "popup". Does anyone have some tips on how to continue? <a href="http://jsfiddle.net/c6fYt/" rel="nofollow">http://jsfiddle.net/c6fYt/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="footer"&gt;
          &lt;ul id="list"&gt;
              &lt;li class="button"&gt;Button 1&lt;/li&gt;
              &lt;li class="box"&gt;AWBGBABBgehahnaphneaneihnahipneanpen&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#footer {
  position:absolute;
  bottom:1px;
  width:100%;
  min-width:800px;
  height:50px;
  background-color:rgba(255, 255, 255, 0.3);
  box-shadow:0px 0px 1px rgba(0, 0, 0, 1.0) inset, 0px 10px 5px 1px rgba(255, 255, 255, 0.1) inset, 0px 35px 20px rgba(255, 255, 255, 0.2) inset;
  }
  
  
  #list {
  list-style:none;
  display:inline;
  }
  
  .button {/*box-shadow: h-shadow v-shadow blur spread color inset;*/
  width:125px;
  background-color:rgba(248, 248, 255, 0.25);
  border-right:1px solid rgba(255, 255, 255, 0.7);
  margin:1px 0px 0px 0px;
  padding:15px 0px;
  text-align:center;
  float:left;
  color:rgba(0, 0, 0, 1.0);
  }
  
  .button:hover {
  background-color:rgba(248, 248, 255, 0.45);
  }
  
  .button:hover + .box {
  display:block;
  }
  
  .box {
  background-color:rgba(0,0,0,0.4);
  width:auto;
  min-width:50px;
  height:250px;
  margin-top:-250px;
  margin-left:-125px;
  float:left;
  display:none;
  }
  </code></pre>