移动下拉菜单：部分隐藏在其他 div 后面：使用 z 索引不起作用

Question

我试图为我的移动网站创建一个所谓的"汉堡菜单"。下面代码的唯一问题是，当我单击按钮时，导航菜单的一部分可见，其余部分隐藏在div id="topnav-mobile"后面。

我以为使用z索引可以工作，但显然我做错了什么。我应该在下面的代码中添加或删除什么才能使其工作？

Html:

<div id="upper">    
    <div class="upper-mobile">
        <div class="upper-mobile-logo">
            <div class="mobile-nav">
                <div class="menu-btn" id="menu-btn">
                <div></div>
                <span></span>
                <span></span>
                <span></span>
                </div>
                <div class="responsive-menu">
                    <ul>
                        <li>Object 1</li>
                        <li>Object 2</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="upper-mobile-name">
            <img src="/images/logo-large.png"/>
        </div>
    </div>
</div>
<div id="topnav-mobile">         
    <div id="topnav-left-mobile">
        <div class="topnav-left-mobile-title">
            <a class="topnav-left-mobile-link" href="/"><b>HOME</b></a>
        </div>
        <div class="topnav-left-mobile-title">
            <a class="topnav-left-mobile-link" href="/nav2"><b>Nav2</b></a>
        </div>
    </div>
</div>

CSS:

#upper  { width:100%; height:auto; float:left; overflow:inherit; position:relative; }
.upper-mobile   { display:inherit; width:100%; float:left; overflow:hidden; position:relative; }
.upper-mobile-logo      { float:left; position:absolute; }
.upper-mobile-logo img  { float:left; position:relative; }
.upper-mobile-name      { float:left; }
.upper-mobile-name img  { position:relative; text-align:center; }
.menu-btn div   { position:absolute; left:100%; top:64%; padding-right:8px; margin-top:-0.50em; line-height:1.2; font-size:18px; font-weight:200; vertical-align:middle; z-index:99; }
.menu-btn span  { display:block; width:19px; height:3px; margin:4px 0; background:#F00; z-index:99; }
.responsive-menu{ display:none; position:relative; z-index:101; }
.expand         { display:block !important; position:relative; z-index:101; }
#topnav-mobile      { display:inherit; width:100%; float:left; position:relative; z-index:-1; }
#topnav-left-mobile     { display:inherit; width:100%; float:left; position:relative; z-index:-1;}
#topnav-left-mobile a:link  { position:relative; z-index:-1;}
#topnav-left-mobile a:visited   { position:relative; z-index:-1;}
#topnav-left-mobile a:hover     { position:relative; z-index:-1;}
#topnav-left-mobile a:active    { position:relative; z-index:-1;}
#topnav-left-mobile a:focus     { position:relative; z-index:-1;}
.topnav-left-mobile-title       { position:relative; z-index:-1;}
.topnav-left-mobile-link        { display:block; position:relative; z-index:-1;}

JS:

<script type="text/javascript">
    jQuery(function($){
         $( '.menu-btn' ).click(function(){
         $('.responsive-menu').toggleClass('expand')
         })
    })
</script>

Answer 1

.upper-mobile {
    display: inherit;
    width: 100%;
    float: left;
    padding: 0 0 0 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #000;
    overflow: hidden;
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    position: relative;
    height: 200px; // You need to add a height, your code is all over the place
}

你的上部手机不够高，无法显示你的所有元素。我增加了一些高度来展示它。你的代码有点到处都是，所以我的建议是清理它并精简它。