表格單元格內的css下拉菜單

Question

當前，在懸停時，當顯示子菜單時，菜單將導致表格單元格展開。我想讓這個css下拉菜單顯示在表格單元格上，而不是在單元格邊界內。

的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/

只需添加position:absolute;到.the_dropdown li:hover ul

Answer 2

這個CSS添加到您的下拉列表容器（您的樣品中div.left）

overflow:visible; position:relative; 

這將讓你設置下拉菜單位置絕對，這將相對於集裝箱：

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