Adding a div layer on top of a jquery carousel. Tough one

I have a tough one, well it's tough for me because I'm kinda new to the whole jQuery carousel thing, never built one before this project.

Here's my problem.

If you go to the TEST SITE you will see a scroller with a blue background about half way down the page. If you mouse onto the "data analytics" slide you should see a black box fade in.

Here is my dilemma. I want that black box to be a menu that's connected to the data analytics slide. I've done a mock up for you so you can see what I'm talking about.

Here is my scroller code. I'm using jCarousel.

 <div class="carousel">

 <u开发者_StackOverflowl>
     <li>
          <div id="homeslide1">
     testers sdfasdfasdfas asdftjhs iasndkad kasdnf
     <a href="#" id="#homeslide1-toggle">Close this</a>  </div>  
     <a href="#" id="homeslide1-show"><img src="<?php bloginfo('template_url'); ?>/images/home_data_analytics.jpg" width="200" height="94" /></a>


     </li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_oem_partnerships.jpg" width="200" height="94" /></li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_reporting.jpg" width="200" height="92" /></li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_returning_lost_customers.jpg" width="200" height="92" /></li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_sales.jpg" width="200" height="92" /></li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_service_retention.jpg" width="200" height="92" /></li>
  </ul>

Here is my scroller css

 /*HOMEPAGE SCROLLER*/
  .carousel {!important padding:10px; width: 890px; margin: 0px 0px 0px 26px;}
  .carousel ul li element.style{height: 94px;}
.carousel ul{width: 200px; padding: 5px;}
.carouselitem{height: 94px;}
.prev{background: url(images/home_left_scroll.png); height: 94px; width: 16px; text-indent: -999px; outline: none; cursor:pointer; float: left;}
.next{background: url(images/home_right_scroll.png); height: 94px; width: 16px; text-indent: -999px; outline: none; cursor:pointer; float: right;}
.carousel ul li{ padding: 0px 3px 0px 3px; margin: 0px; height:!important 94px;
}
.home_right_arrow{
     width: 16px;
     float: right;}
    .home_left_arrow{
     width: 16px;
     float: left;}
.homeslide1{
    width: 200px;
    height: 94px;}

I've tried all sorts of z-index tricks but can't seem to figure it out on my own. If you solve this riddle I'll buy you a beer if we ever meet up. I'll also give you a high five through the internet.

Is there a simple way to do this via jQuery? If so could you point me in the right direction?

Thanks so much.

I was going to make an example using your site, but the code is too hard to navigate. So basically, you just need to get the position of the linking element with offset, and then use it to set the offset of the menu. So yes, use absolute positioning; it's by far the easiest way this will work. You may also need to make your a fill up the whole space by making it display: block; and setting its dimensions.

Here's an example. When making it I found that for some reason the offset got applied relative to the old location when it was used more than once. I can't explain why, but using .css(left: x, top: y) instead for setting the location worked.