표 셀 안의 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/

그냥 .the_dropdown li:hover ul

Answer 2

에 position:absolute;를 추가하는 것은 당신의 드롭 다운 컨테이너 (샘플에서 div.left)

overflow:visible; position:relative; 

이 CSS를 추가 이것은 당신이 절대에 드롭 위치를 설정할 수 있습니다 것 컨테이너에 상대적 일 것입니다 :

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