html - 表格单元格内的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