html - ドロップダウン メニューを表示する際の問題

Question

画像がホバーされたときに表示されるドロップダウンメニューを作成しようとしています。私が抱えている問題は、div #topbar に overflow:hidden が必要であることですが、ドロップダウン メニューが内部に配置され、このトップ バーの下部にクリップされると、明らかに問題が発生します。

このオーバーフローをオーバーライドする方法があるかどうか疑問に思っていました: ドロップダウン メニューが完全に表示されるように非表示にしますか? みんな、ありがとう。

問題のスクリーンショット (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;