Stacked Hexagons

HTML

<div id="searchnav">
        <img src="http://www.raynordesign.net/images/test/searchmenu.gif" width="230" height="31"/>
        <div id="single1" class="single">
            <a href="#" class="hover"><div id="hexagon" class="clinical"></div>
            <div class="block">
        <ul class="submenu">
            <li>Program Level</li>
            <li>Phase 2</li>
            <li>Phase3</li>
            <li>Long-Term Extension</li>
        <ul>
            
   </div></a>
        </div>
        
        <div id="double1" class="double">
            <a href="#" class="hover"><div id="hexagon" class="congress"></div> </a>
            <a href="#"><div id="hexagon"class="publications"></div></a>
        
        </div>
        <div id="single2" class="single">
          <a href="#"><div id="hexagon" class="advisory"></div></a>
        </div>
        <div id="double2" class="double">
        <a href="#"><div id="hexagon" class="medical"></div></a>
            <a href="#"><div id="hexagon" class="phase3b4"></div></a>
        </div>
        <div id="single3" class="single">
          <a href="#"><div id="hexagon" class="lexicon"></div></a>
        </div>
        
      </div>

CSS

#searchnav{
    width:230px;
    height:550px;
    background:#0093D0;
    float:left;
    margin-right:5px;
    position:relative;
}

#single1, #single2, #single3 {
    display:block;
    position: relative;
    width: 110px;
}
#double1, #double2 {
    display:block;
    position:relative;
    width: 230px;
}
.single { padding:0 60px;}
.double { padding:0;}

#double1 {top:-30px;}
#single2 {top:-55px;}
#double2 {top:-80px;}
#single3 {top:-105px;}

#hexagon {
    width: 105px;
    height: 115px;
    position: relative;
    display:block;
    margin: 5px;
    float:left;
    /*z-index:3;*/
}

.clinical{background:url("http://www.raynordesign.net/images/test/clinical-hex.png") transparent no-repeat;}
.clinical:hover{background:url("http://www.raynordesign.net/images/test/clinical-hex-hover.png") transparent no-repeat;}

.congress{background:url("http://www.raynordesign.net/images/test/congress-hex.png") transparent no-repeat;}
.congress:hover{background:url("http://www.raynordesign.net/images/test/congress-hex-hover.png") transparent no-repeat;}

.publications{background:url("http://www.raynordesign.net/images/test/publications-hex.png") transparent no-repeat;}
.publications:hover{background:url("http://www.raynordesign.net/images/test/publications-hex-hover.png") transparent no-repeat;}

.advisory{background:url("http://www.raynordesign.net/images/test/advisory-hex.png") transparent no-repeat;}
.advisory:hover{background:url("http://www.raynordesign.net/images/test/advisory-hex-hover.png") transparent no-repeat;}

.medical{background:url("http://www.raynordesign.net/images/test/medical-hex.png") transparent no-repeat;}
.medical:hover{background:url("http://www.raynordesign.net/images/test/medical-hex-hover.png") transparent no-repeat;}

.phase3b4{background:url("http://www.raynordesign.net/images/test/phase3b4-hex.png") transparent no-repeat;}
.phase3b4:hover{background:url("http://www.raynordesign.net/images/test/phase3b4-hex-hover.png") transparent...

JavaScript

/*
by: JD Graffam

tweaked slightly by Chris Coyier
*/

$('.hover').hover(function() {
    $(this).find(".block").animate({
        left: '+=180',
        "opacity": "2"
    }, {
        
        queue: false,
        duration: 500
    });
}, function() {
    $(this).find(".block").animate({
        left: '0',
        "opacity": "0"
    }, {
        queue: false,
        duration: 500
    });
});