Question

我有一个基本表，其中包含一个div，我从单元格中取出“position：absolute”，它从单元格左侧开始向右流动，并向右流动。

我希望能够使用最后一个单元格向后执行此操作（将子菜单表锚定在单元格的右侧（或基本上是表格）

我已经在FireFox中工作了，（有点乱）但它在IE中不起作用。

Html如下

<table style="background-color: gold;" border="1" bordercolor="orange"  cellspacing="0">
    <tr>
        <th>Parent Cell 1
        <div style="position: absolute;  background-color: green; color: white;">
            supercalifragilisticexpialidocious
        </div>
        </th>
        <th>Parent Cell 2
        </th>
        <th>Parent Cell 3
        </th>
        <th>Parent Cell 4
        </th>
        <th>Parent Cell 5
            <div style="float:right; ">
                <div style="position:absolute;">
                    <div style="position: absolute; right: 0px; background-color: green; color: white;">
                        supercalifragilisticexpialidocious
                    </div>
                </div>
            </div>
        </th>
    </tr>
</table>

有没有人知道如何让最右边的子菜单项（在某种意义上）下降到与左边相同的水平。正如我所说（简化版）在FireFox中工作，只是不在IE中，我需要它在两者中工作......：S

我也不知道最右边的单元格是否以最合适的方式构建，或者是否有更好的方法！

由于

Answer 1

好的，从我收集的内容来看，这基本上就是你想要的，除了我使用语义标记和CSS完成它。

标记

<ul id="nav">
    <li>
        <a href="#">Parent 1</a>
        <ul>
            <li><a href="#">Child Item 1</a></li>
            <li><a href="#">Child Item 2</a></li>
            <li><a href="#">Child Item 3</a></li>
            <li><a href="#">Child Item 4</a></li>
        </ul>
    </li>
    <li><a href="#">Parent 2</a></li>
    <li>
        <a href="#">Parent 3</a>
        <ul>
            <li><a href="#">Child Item 1</a></li>
            <li><a href="#">Child Item 2</a></li>
            <li><a href="#">Child Item 3</a></li>
            <li><a href="#">Child Item 4</a></li>
        </ul>
    </li>
</ul>

CSS

#nav {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 20px;
}
#nav li {
    border: 1px solid #ccc;
    width: 150px;
    height: 20px;
    float: left;
    position: relative;
    background: #eee;
}
#nav ul {
    margin: 0;
    padding: 0;
    width: 130px;
    position: absolute;
    top: 21px;
    left: 0;
    list-style: none;
    display: none;
}
#nav li:hover ul {
    display: block;
}
#nav ul li {
    width: auto;
    float: none;
}

如果您希望将子列表固定在右侧，那么您可以将#nav ul下的left: 0;更改为right: 0;来改为阅读{{1}}。

这适用于IE7 +。对于IE6，您需要使用基于脚本的解决方案来实现悬停，例如whatever:hover，或者根据自己的喜好过于苛刻地编写自己的悬停。

表格单元格下拉菜单锚定在单元格的右侧

1 个答案: