title: Emulating CSS Popup Box
body: <p>I am trying to emulate the popup box on this site when you mouseover "work" link: <a href="http://zooadvertising.com.au/" rel="nofollow">http://zooadvertising.com.au/</a></p>
  
  <p>The popup and mouseover elements work great. The only thing I cannot figure out how to do is create multiple columns within the popped up element. When I try to add another div within it to say, float right as a second column, it creates more popups instead. Is there a way to nest divs inside an element styled like this?</p>
  
  <p>Edited Fiddle: <a href="http://jsfiddle.net/7ZE8q/6/" rel="nofollow">http://jsfiddle.net/7ZE8q/6/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style type="text/css" title=""&gt;
  .NameHighlights {
  position:relative;
  }
  .NameHighlights div {
  display: none;
  }
  .NameHighlightsHover {
  position:relative;
  }
  .NameHighlightsHover div {
  display:block;
  position:absolute;
  width: 400px;
  height: 300px;
  top:30px;
  left:-300px;
  z-index:1000;
  background-color: #000000;
  padding: 15px;
  font-size: 14px;
  color: white;
  }
  &lt;/style&gt;
  </code></pre>