我正在尝试创建一个下拉菜单，显示图像何时悬停。我遇到的问题是 div #topbar 需要溢出：隐藏，但显然，当下拉菜单放置在内部并剪辑在此顶部栏的底部时，这会产生问题。
我想知道是否有办法覆盖这个溢出：隐藏以便下拉菜单完全显示？感谢大家。
问题截图（Mod PTS）：
HTML/PHP：
<div id="topbar">
<div id="text-topbar">
<a href="http://www.defensedpt.com/index.html"><img src="images/home.png" /></a><img src="images/spacer.png" />
<a href="http://www.defensedpt.com/personnel/index.html"><img src="images/pts-home.png" /></a><img src="images/spacer.png" />
<a href="http://www.defensedpt.com/personnel/pts.php"><img src="images/main-listing.png" /></a><img src="images/spacer.png" />
<a href="http://www.defensedpt.com/personnel/mc_mos.php"><img src="images/mos-roster.png" /></a><img src="images/spacer.png" />
<a href="http://www.defensedpt.com/personnel/dd.php"><img src="images/fired.png" /></a><img src="images/spacer.png" />
<a href="http://www.defensedpt.com/personnel/hd.php"><img src="images/resigned.png" /></a><img src="images/spacer.png" />
<?php
if (!empty($user_data) && $user_data['moderator'] == 1) {
$menu1 =
'<ul id="menu">
<li><a href="#"><img src="images/mod-pts.png" /></a>
<ul>
<li style="overflow: visible;"><a href="#">The Team</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Vision</a></li>
</ul>
</ul>
';
printf($menu1);
}
if (!empty($user_data) && $user_data['admin'] == 1) {
echo '<a href="http://www.defensedpt.com/personnel/approve.php"><img src="images/approve.png" /></a><img src="images/spacer.png" />';
echo '<a href="http://www.defensedpt.com/personnel/ban.php"><img src="images/ban.png" /></a><img src="images/spacer.png" />';
echo '<a href="http://www.defensedpt.com/personnel/unban.php"><img src="images/unban.png" /></a><img src="images/spacer.png" />';
echo '<a href="http://www.defensedpt.com/personnel/delete_entries.php"><img src="images/delete.png" /></a>';
}
?>
</div>
</div>
CSS：
#topbar {
width: 1980px;
height: 44px;
background: #1C1C1C;
position: fixed;
top: 0px;
left: 0px;
-moz-box-shadow: 1px 1px 10px 1px #000000;
-webkit-box-shadow: 1px 1px 10px 1px #000000;
box-shadow: 1px 1px 10px 1px #000000;
vertical-align: middle;
text-align: left;
overflow: hidden;
z-index: 99;
}
#text-topbar {
position:absolute;
width: 70%;
top:35%;
left:160px;
height:44px;
}
ul {
font-family: open_sanslight;
font-size: 18px;
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #6d6d6d;
background: #1C1C1C;
white-space: nowrap;
font-family: open_sanslight;
margin-left: 5px;
margin-right: 5px;
}
ul li a:hover {
background: #1C1C1C;
color: #6d6d6d;
overflow: visible;
}
li:hover ul {
display: block;
position: absolute;
overflow: visible;
}
li:hover li {
float: none;
font-size: 11px;
overflow: visible;
}
li:hover a {
background: #1C1C1C;
color: #6d6d6d;
overflow: visible; }
li:hover li a:hover {
background: #1C1C1C;
color: #6d6d6d;
overflow: visible;