Html 表格单元格内的css下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9796109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css dropdown inside a table cell
提问by FiveTools
Currently, on hover, the menu will cause the table cell to expand when the submenu is shown. I want to have this css dropdown menu display over the table cells and not within the cells boundaries.
目前，在悬停时，菜单会在显示子菜单时导致表格单元格展开。我想让这个 css 下拉菜单显示在表格单元格上，而不是在单元格边界内。
the 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;
}
And the html:
和 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>
回答by henryaaron
Is this what you're looking for?
这是你要找的吗？
Just add position:absolute;to the .the_dropdown li:hover ul
只需添加position:absolute;到.the_dropdown li:hover ul
回答by o.v.
Add this css to your dropdown container (div.left in your sample)
将此 css 添加到您的下拉容器（示例中的 div.left）
overflow:visible; position:relative;
This would let you set dropdown position to absolute, which would be relative to container:
这将让您将下拉位置设置为绝对，这将是相对于容器：
position:absolute; top:0; left:0;
