html - 表格单元格中的下拉菜单仅通过 CSS

Question

我有一个水平导航栏，我试图通过使用列表和 CSS 将其添加到下拉菜单中，以便在悬停时显示列表。由于这是在表格中，因此我遇到了无法正确显示的问题。如何修复 CSS 以便正确显示？浏览器将是 IE11 和 Chrome。

CSS:

#coolMenu,
#coolMenu ul {
    list-style: none;
}

#coolMenu {
    float: left;
}
#coolMenu > li {
    float: left;
}
#coolMenu li a {
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#coolMenu ul {
    position: absolute;
    display: none;
    z-index: 999;
}
#coolMenu ul li a {
    width: 80px;

}
#coolMenu li:hover ul {
    display: block;
}

HTML

<td colspan="100%">
        <table border="1" cellspacing="0" width="100%" align="center">
            <tr style="text-align:center; font-size:x-small; color-white;">
                <td>
                    <ul id="coolMenu">
                        <li>
                            <a href="#">Link1</a>
                            <ul>
                                <li><a href="#">one</a></li>
                                <li><a href="#">two</a></li>
                                <li><a href="#">three</a></li>
                                <li><a href="#">four</a></li>
                                <li><a href="#">five</a></li>
                            </ul>
                        </li>
                    </ul>
                </td>
                <td>
                    <ul id="coolMenu">
                        <li>
                            <a href="#">Link2</a>
                        </li>
                    </ul>
                </td>
            </tr>
        </table>

Answer 1

我注意到的第一件事是具有coolMenu 的id 重复了两次。 id 应该是唯一的! 请更正。对于您的查询，嗯，没有完整的 HTML，但是，放置一个 position: relative 并使用 position: absolute 会很好。

看看下面的片段，这是你要找的吗:

#coolMenu,
#coolMenu ul {
  list-style: none;
}

#coolMenu {
  float: left;
}
#coolMenu > li {
  float: left;
}
#coolMenu li a {
  display: block;
  height: 2em;
  line-height: 2em;
  padding: 0 1.5em;
  text-decoration: none;
}
#coolMenu ul {
  position: absolute;
  display: none;
  z-index: 999;
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 0;
}
#coolMenu ul li a {
  width: 80px;

}
#coolMenu li:hover ul {
  display: block;
}

<table border="1" cellspacing="0" width="100%" align="center">
  <tr style="text-align:center; font-size:x-small; color-white;">
    <td>
      <ul id="coolMenu">
        <li>
          <a href="#">Link1</a>
          <ul>
            <li><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
            <li><a href="#">four</a></li>
            <li><a href="#">five</a></li>
          </ul>
        </li>
      </ul>
    </td>
    <td>
      <ul id="coolMenu2">
        <li>
          <a href="#">Link2</a>
        </li>
      </ul>
    </td>
  </tr>
</table>