CSS3/HTML5：以固定位置显示的汉堡菜单不显示答案

【问题标题】：CSS3/HTML5: Hamburger menu displayed with fixed positioning not displayingCSS3/HTML5：以固定位置显示的汉堡菜单不显示
【发布时间】：2014-12-29 08:24:09
【问题描述】：

我创建了一个汉堡下拉菜单，该菜单直到最近才有效，我猜这是由于 Chrome 中的浏览器更新所致。所以我正在考虑提高它在浏览器中的稳定性。现在它根本不显示。在 Chrome 中，它看起来像是通过开发工具正确定位的。（如果有人想检查我的网站：http://alexandstein.com/main/dndchar）我尝试检查 Z-index，但似乎我已经将其设置为 30。

这是导航的 HTML，其中包括汉堡菜单。

<nav id="navigation">
    <ul>
        <span id="logo">
            <a href="http://alexandstein.com/"><li>Alexworks</li></a>
        </span>
        <span id="links">
            <a href="http://alexandstein.com/main/about/"><li>About-Meta</li></a><a href="http://alexandstein.com/main/projects/"><li>Projects</li></a><a href="http://alexandstein.com/main/music/"><li>Music</li></a>     </span>
        <span id="hamburgerSection">
            <li id="hamburger" class="menuFocused"><img src="http://alexandstein.com/resources/images/icons/hamburger.png" alt="Menu" class="iconSmall">        
        </li>
    </span></ul>
    <div id="hamburgerMenu" style="display: block;">
        <div id="controls">
            <img height="35" width="35" class="textControls" id="smallTextButton" src="/resources/images/icons/TextIconSmall.png" alt="Small">
            <img height="35" width="35" class="textControls" id="medTextButton" src="/resources/images/icons/TextIconMed.png" alt="Medium">
            <img height="35" width="35" class="textControls" id="largeTextButton" src="/resources/images/icons/TextIcon.png" alt="Large">
        </div>
        <p>Table of Contents</p><p>
        </p><ul id="tableOfContents"><a href="#Preface"><li>Preface</li></a>
        <a href="#Instructions"><li>Instructions</li></a>
        <a href="#DnD_Character_Manager"><li>DnD Character Manager</li></a>
        <a href="#Notes"><li>Notes</li></a>
    </ul>
    </div>
</nav>

相关的CSS：

#hamburgerMenu{
    background-color: rgba(30,30,30, 0.9);
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    padding: 9px;

    width: 230px;
    position: fixed;
    top: 35px;
    right:0%;
    z-index: 30;

    font-size: 12pt;

    border-left-style: solid;
    border-left-color: rgba(100,100,100, 0.5);
    border-left-width: 4px;

    overflow-x: hidden;

    .textControls{
        width: 35px;
        height:35px;
        margin-right: 5px;

        display: inline;

        background-color: white;
        color: black;
        text-decoration: underline;
        text-align: center;

        opacity: 0.5;
    }

    .textControls:hover{
        opacity: 1.0;
    }
}

如果有人想检查父元素是否有任何怪癖，这里是导航 CSS：

/*NAVIGATION BAR*/
#navigation{
    min-width: @MIN-WIDTH;
    list-style-type: none;
    text-align: center;
    width: 100%;
    margin: 0%;
    padding: 0%;
    padding-top: .3em;
    position: fixed; 
    top: 0px;  
    right:0px; 
    z-index: 10;

    background-color: black;
    height: 35px;

    overflow-y: hidden;
    overflow-x: scroll;

    ul{
        margin: 0%;
        padding: 0%;
        padding-top: 0%;
    }
    a{
        margin-top: 5px;
        margin-right: .4em;
        color: @HEADER_TEXT;
    }
    a:visited{
        color: #999;
    }
    a:hover{
        color: #bbb;
    }
    li{
        display: inline-block;
        width: 13em;
        height: 1.8em;

        border-bottom-style: solid;
        border-bottom-color: red;
    }
    li:hover{
        background-color: #333;
    }
    .iconSmall{
        width: 30px;
        height:30px;
    }
    #logo{
        display: inline-block;
        text-align: left;
        width: inherit;
        float:left;
        letter-spacing: 5px;
    }
    #links{
        display: inline-block;
        right: 0px;
    }
    #hamburger{
        width: 30px;
        border-bottom-style: none;
        float: right;
    }
}

【问题讨论】：

标签： html css less

【解决方案1】：

问题是您的#navigation 元素溢出。通过这些溢出，您是在告诉浏览器不要显示 #navigation 元素范围之外的任何内容。

它以前有效而现在无效的最可能原因是overflow-x 和overflow-y 仍处于试验阶段（也不能向后兼容）。我建议把它们拿出来。

带有 chrome 检查器更改的图片：

【讨论】：