テーブルセル内のCSSドロップダウン

Question

現在、ホバー上では、サブメニューが表示されたときにテーブルセルが展開されます。私はこのセルのドロップダウンメニューをテーブルのセル上に表示し、セルの境界内には表示しません。

CSS：

img.dropdown_class { 
     width: 16px; 
     height: 16px; 
     text-align: left; 
    } 

    .the_dropdown { 
     width: 100px; 

    } 

    .selectedoption { 
     width: 100px; 
     border: 1px solid #000; 
     height: 14px; 
     padding: 5px; 
    } 

    ul.the_dropdown, .the_dropdown li ul { 
     list-style-type: none; 
    } 

    .the_dropdown li ul { 
     margin-top: 5px; 
    } 

    .the_dropdown li a { 
     color:#000; 
     text-decoration:none; 
     background-color: yellow; 
     padding:1px; 
     width:100px; 
     display:block; 

    } 

    .the_dropdown li ul { 
     display: none; 

    } 

    .the_dropdown li:hover ul{ /* Display the dropdown on hover */ 
     display:block; 
    } 

とHTML：

<table> 
     <tr> 
      <td>Cell 1A</td> 
      <td> 
       <div> 
        <div class="left" style="width: 100px;"> 
         <ul class="the_dropdown"> 
          <li><span class="selectedoption">selected option</span> 
           <ul> 
            <li><a href="#">2</a></li> 
            <li><a href="#">3</a></li> 
            <li><a href="#">4</a></li> 
           </ul> 
          </li> 
         </ul> 
        </div> 
        <div class="left"> 
         <img src="images/go_down.png" class="dropdown_class" /> 
        </div> 
        <div class="clearfix"> 
        </div> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td>Cell 2A</td> 
      <td>Cell 2B</td> 
     </tr> 
    </table> 

Answer 1

が、これはあなたが探しているものですか？

http://jsfiddle.net/aaNgm/

ただ、これはあなたが絶対にドロップダウンの位置を設定できます、あなたのドロップダウンコンテナ（あなたのサンプル中div.left）

overflow:visible; position:relative; 

に、このCSSを追加.the_dropdown li:hover ul

Answer 2

にposition:absolute;を追加これは容器との相対的なものである：

position:absolute; top:0; left:0;