異なるのDropDownListコンポーネント

Question

は、私は以下のようにコンポーネントを作成したい：

それは、ドロップダウンリストのようなものになります。私はテーブルの行のすべてのセル（td）このコンポーネントを使用したい。だから私の問題は、最初のdivの2番目のdiv（項目リスト）を表示するが、テーブル行の上に表示する。

あなたのCSSについて教えてください。

Answer 1

まずは、ポップアウトのdivを下に表示するのではなく上に表示します。その理由は、自動的に上の要素の上に（z-indexの意味で）上にあるため、連続する表の行で覆われないからです。

第二に、あなたがこのような何か持っていることになるでしょう：あなたはこのJavaScriptを追加することができますIEの古いバージョンでは、この作業を行うには

div.action { 
    width:75px; 
    height:30px; 
    position:relative; 
} 
div.select { 
    position:absolute; 
    top:0; 
    left:0; 
} 
div.popout { 
    position:absolute; 
    left:0; 
    bottom:30px; 
    width:300px; 
    display:none; /* it will be revealed on hover */ 
} 
div.action:hover div.popout { 
    display:block; 
} 

：次に、このようにCSSでそれを有効

<div class="action"> 
    <div class="select"><!-- select box here --></div> 
    <div class="popout"><!-- stuff here --></div> 
</div> 

をアクションdiv：

<div class="action" onmouseover=""this.className='action hover'" onmouseout="this.className='action'"> 

次に、状態の代わりにホバーのクラスを使用してください：

div.hover div.popout { 
    display:block; 
} 

私はそれがあなたが意味することを望みます！ :)