title: css dropdown inside a table cell
body: <p>Currently, on hover, the menu will cause the table cell to expand when the submenu is shown.  I want to have this css dropdown menu display over the table cells and not within the cells boundaries.  </p>
  
  <p>the css:  </p>
  
  <pre><code> 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;
      }
  </code></pre>
  
  <p>And the html:</p>
  
  <pre><code> &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;Cell 1A&lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;
                      &lt;div class="left" style="width: 100px;"&gt;
                          &lt;ul class="the_dropdown"&gt;
                              &lt;li&gt;&lt;span class="selectedoption"&gt;selected option&lt;/span&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class="left"&gt;
                          &lt;img src="images/go_down.png" class="dropdown_class" /&gt;
                      &lt;/div&gt;
                      &lt;div class="clearfix"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Cell 2A&lt;/td&gt;
              &lt;td&gt;Cell 2B&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>