CSSのポジショニングに助けてください

Question

私はhtmlとcssでexperinceですが、CSSのポジショニングでは良くありません。ここに全体のアイデアがあります。リンクにマウスを置くとイメージリンクがあるとします。divを表示する必要があります。ここでアイテムの情報を表示します。私はそれが絶対的な位置付けによって行われるべきであることを知っている。しかし、これは私のために働いていない。私はデザインをお見せしましょう：

http://beta.citystir.com/wp-content/uploads/2011/02/sadf.jpg

そして、私の仕事これまでにあなたがここに見ることができます：http://beta.citystir.com/static/

ここではHTMLです。私は1つの項目のコードを示しました。 Hover_previewは、ホバーが表示されるはずのdiv全体になります。私はJavaScriptを介してそれをやっているので、ホバリングの効果について今気にしない。 divを正しく表示する方法を教えてください。

<ul id="featured_classifields"> 
        <div id="fcf_wraper">  

<li> 
         <a href="#"><img src="images/temp/featured-thumb.png" title="" alt="" width="135" height="90" /></a> 
          <div class="hover_preview"> 
           <div class="hover_preview_main"> 
           </div> 
           <div class="hover_preview_arrow"></div> 
          </div> 
         </li> 
         <li> 
</div> 
</ul> 

は、CSS：

コードのいくつかの詳細

ul#featured_classifields{ 
    margin: 0 30px; 
    height:95px; 
    overflow:hidden; 
    position:relative; 
} 

#fcf_wraper{ 
    width:1600px; 
    height:90px; 
} 

ul#featured_classifields li{ 
    float:left; 
    width:135px; 
    height:90px; 
    background:#ddd; 
    display:block; 
    margin: 8px 8px 5px 0; 
    position:relative; 
}  

.hover_preview{ 
     position:absolute; 
     z-index: 5; 
     bottom:100%; 
} 

.hover_preview_main{ 
     background: #000; 
     width:400px; 
     height: 300px; 
    } 

    .hover_preview_arrow{ 
    } 

： ULはフルスライダーを保持します。すべてのliはdiv #fcf_wraperでラップされていますが、その幅はjavascriptによって決定されるすべてのliと等しくなりますが、今は値を入れています。ラッパーの余分な部分を表示しないために、私はオーバーフローを隠して設定します。問題は、私は隠されたdiv要素「hover_preview」へのオーバーフローを設定するときでも、それによって隠れてしまっている:(

をあなたからいくつかの助けを得ることを望んおかげ

Answer 1

はこのような何か：。！

$("#fcf_wraper img").hover(
       function() { 
        $("div.hover_preview").css({ 
         position: "absolute", 
         left: $(this).offset().left + "px", 
         top: $(this).offset().top - $("div.hover_preview").outerHeight() + "px", 
         display: "block" 
        }); 
       }, 
       function() { 
        $("div.hover_preview").hide(); 
      }); 

を