表格单元格内的css下拉菜单答案

【问题标题】：css dropdown inside a table cell表格单元格内的css下拉菜单
【发布时间】：2012-04-05 11:16:04
【问题描述】：

目前，在悬停时，菜单会在显示子菜单时导致表格单元格展开。我想让这个 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>

【问题讨论】：

标签： html css

【解决方案1】：

这就是你要找的吗？

http://jsfiddle.net/aaNgm/

只需将position:absolute; 添加到.the_dropdown li:hover ul

【讨论】：

+1 因为它有效。不过，我今天真的很厚，为什么它在没有像我在回答中建议的那样在容器元素上设置 position:relative 的情况下工作？

【解决方案2】：

将此 css 添加到您的下拉容器（示例中的 div.left）

overflow:visible; position:relative;

这可以让您将下拉位置设置为绝对，这将是相对于容器：

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

【讨论】：