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;