Question

我很抱歉，如果有明显的答案或使用不正确的条款 - 我不经常使用CSS。

我正在使用的是动态生成的表：

    <style type="text/css">
    .tg  {border-collapse:collapse;border-spacing:0;}
    .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
    .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
    </style>

      #some would be code here to display column headers; I've omitted it.
        <tr>
        <td class="tg-031e"><input type="checkbox" onclick="showForm()"></td>
        <td class="tg-031e">%s</td>

注意我在其中一个单元格中有一个复选框，当单击它时会调用showForm()。该功能如下所示：

    function showForm() {
document.getElementById("f2").style.display = "block";

它突然出现<div id="f2" style="display:none">块中的多级下拉菜单。多级下拉菜单的CSS是：

/* Menu Styles */

.third-level-menu
{
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li
{
    height: 30px;
    background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }

.second-level-menu
{
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.second-level-menu > li
{
    position: relative;
    height: 30px;
    background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li
{
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu li:hover > ul
{
    /* On hover, display the next level's menu */
    display: inline;
}


/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;

    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }

HTML是以下变体：

<ul class="top-level-menu">
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li>
        <a href="#">Offices</a>
        <ul class="second-level-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li>
                <a href="#">New York</a>
                <ul class="third-level-menu">
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Book a Meeting</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Jobs</a></li>
                </ul>
            </li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

（这两个都来自here）

现在，问题是当选中复选框并运行showForm时，会出现多级下拉菜单，但超出根选项的任何级别都会被显示的单元格边界遮挡。换句话说，当我将鼠标悬停在根菜单项上时，子组仅出现在根菜单项底部和菜单所在单元格底部之间的少量空间中。所以菜单仅限于它所在的单元格;我尝试过更改表格的不透明度，但这并没有帮助。

有没有办法让菜单前景化，或者将表格保留在背景中，以便菜单及其所有子组正常显示？

感谢您的时间

Answer 1

您应该可以将position: absolute应用于菜单，以允许它在表格之外呈现。

＆＃13;

td {
  background-color: blue;
  height: 100px;
  vertical-align: top;
  width: 100px;
}

div {
  background-color: red;
  height: 50px;
  position: absolute;
  width: 150px;
}

＆＃13;

<table>
  <tr>
    <td>
      <div>Overflowing content</div>
    </td>
    <td>
      Content
    </td>
  </tr>
</table>

＆＃13;

制作多级下拉菜单会显示在表格中

1 个答案: