Question

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.

the 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;
    }

And the 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

Is this what you’re looking for?

http://jsfiddle.net/aaNgm/

Just add position:absolute; to the .the_dropdown li:hover ul