How can I make DIVs flyout in response to a hover event (like the National Geographic site) using jQuery?

Question

I have an issue similar to the question raised here, but a somewhat different case.

---

The functionality I'm looking for is almost identical to the National Geographic website (www.nationalgeographic.com), where the "sneak peek" appears when hovering over one of the main links, and stays visible while interacting with it, or hovering over the child menu, but disappears when not hovering over the menu item, child links, or the "sneak peek".

---

When I mouseover over the list items below, I would like a DIV that I specify (in this case corresponding by number - but I would like the flexibility to define the div name individually if numbers don't exist, or don't match up [I'm using Drupal, and everything is dynamically generated]) to slide out, or just appear, beneath it (the list will be inline). It needs to stay open so people can click the link that appears in the DIV, but when you mouseout from the DIV or the list item, the div needs to disappear.

My HTML looks more like this:

<div id="navigation">
    <ul id="switches">
      <li class="item-1">First item</li>
      <li class="item-2">Second item</li>
      <li class="item-3">Third item</li>
      <li class="item-4">Fourth item</li>
    </ul>
    <div id="block-1" class="block">
        <p>First block</p>
        <p><a href="http://www.google.com"&gt;Click here!</a></p>
    </div>
    <div id="block-2" class="block">
        <p>Second block</p>
        <p><a href="http://www.google.com"&gt;Click here!</a></p>
    </div>
    <div id="block-3" class="block">
        <p>Third block</p>
        <p><a href="http://www.google.com"&gt;Click here!</a></p>
    </div>
    <div id="block-4" class="block">
        <p>Fourth block</p>
        <p><a href="http://www.google.com"&gt;Click here!</a></p>
    </div>
</div>

My CSS looks like this:

#switches li {
    display: inline-block;
    height: 50px;
    background-color: #F33;
}
#block-1,
#block-2,
#block-3,
#block-4 {
    position: absolute;
    top: 50px;
    height: 300px;
    width: 500px;
    background-color: #999;
    display: none;
}
#block-1.active,
#block-2.active,
#block-3.active,
#block-4.active {
    display: block;
}

And my jQuery (based on Carl Meyer's answer to the other thread, which I'm sure I've botched up horribly) looks like this:

$(document).ready(function() {
    switches = $('#switches > li');
    slides = $('#navigation > div.block');
    switches.each(function(idx) {
        $(this).data('slide', slides.eq(idx));
    }).hover(
    function() {
        switches.removeClass('active');
        slides.removeClass('active');             
        $(this).addClass('active');  
        $(this).data('slide').addClass('active');
    });
});

I'm not familiar with how this code is working, and have been trying to work it out, but I'm not sure I understand the use of "idx" and how the singular "slide" term comes into play.

I'm pretty new to jQuery and have been tasked with this project. I appreciate any help, and I hope others are able to find it useful as well!