html - 显示下拉菜单时出现问题

Question

我正在尝试创建一个下拉菜单，当鼠标悬停在图像上时会显示该菜单。我遇到的问题是 div #topbar 需要有 overflow:hidden，但是当下拉菜单被放置在里面并夹在这个顶部栏的底部时，显然这会产生问题。

我想知道是否有一种方法可以覆盖此 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;

Answer 1

你可以...

• 将 overflow 属性更改为 hidden 以外的属性>
• 将 overflow: hidden 移动到 #topbar 中的容器元素中
• 将菜单移到 #topbar 之外，并使用 position: absolute 定位它们