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;

表格单元格内的css下拉列表

2 个答案: