Emulating CSS Popup Box

Question

I am trying to emulate the popup box on this site when you mouseover "work" link: http://zooadvertising.com.au/

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?

Edited Fiddle: http://jsfiddle.net/7ZE8q/6/

CSS:

<style type="text/css" title="">
.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;
}
</style>

Answer 1

Here's my solution: It's in JSFiddle Form. Hope this Helps. I used bootstrap to help add a bit of basic styling, but the important part isn't using bootstrap, it's the jquery used:

$(document).ready(function(){

        $('.nav3Hov').hide();
        $('#nav3').on('mouseover', function(){
            $('.nav3Hov').stop(true,true).fadeIn(200);
        }).on('mouseleave', function(){
            $('.nav3Hov').stop(true).delay(200).fadeOut(200);
        });      
        $('.nav3Hov').on('mouseenter', function(){
            $(this).stop(true).clearQueue().show();
        }).on('mouseleave', function() {
            $(this).delay(200).fadeOut(200);
        });
});

EDIT By the way, sorry for not using the jsfiddle that you provided. I started answering before you added it! :P

Answer 2

What you should do is something like this: http://jsfiddle.net/8X3uj/1/

HTML:

<div class="top_bar">
  <span>Work
    <div class="popup">
      <div class="column" style="background-color: red;">
        <div class="left_column"></div>
        <div class="right_column"></div>
      </div>
      <div class="column" style="background-color: green;">
        <div class="left_column"></div>
        <div class="right_column"></div>
      </div>
      <div class="column" style="background-color: yellow;">
        <div class="left_column"></div>
        <div class="right_column"></div>
      </div>
    </div>
  </span>
</div>

CSS:

.top_bar{ background-color: lightgreen; }
.popup{ background-color: black; height: 500px; display: none; font-size: 0px; }
.popup:hover{ display: block; text-align: center; }
.top_bar > span:hover > div{ display: block; }
.column{ height: 400px; width: 33%; display: inline-block; margin: 0px 1px; }
.column > div{ width: 50%; height: 300px; display: inline-block; }
.column > div:first-child{ background-color: dodgerblue; }
.column > div:last-child{  background-color: gray; }

1. The popup itself has black background.
2. There are 3 main columns inside the popup, with background red, green and yellow.
3. There are subcolumns inside each column, with background blue and gray.

You don't need any JS... just HTML and CSS, with :hover and display: inline-block;

Hope it helps!