html - 低于 600px 的 css 问题

Question

所以，我遇到的问题真的很难解释，但是，当页面宽度小于 600 像素时，我试图让我的导航行为有所不同。我几乎按照我想要的方式工作，但是当我点击菜单按钮时，当它低于 600px 时，它会在它下面的内容顶部创建一个下拉菜单，我希望它将内容移动到底部展开时的菜单。当然，当网站全宽时，我仍然希望菜单能够覆盖内容。

CSS

.main-navigation {
    position: relative;
    padding-left: 150px;
    float: right;
    width: 100%;
    display: block;
    clear: both;
    text-transform: uppercase;
    background: #2CB3B4;
    height: 44px;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation li {
    float: left;
    position: relative;
}

.main-navigation li a:after {
    content: '';
    border: 4px solid transparent;
    border-top: 4px solid white;
    margin-left: 4px;
    margin-bottom: 3px;
    display: inline-block;
    margin-top: 4px;
    vertical-align: middle;
}

.main-navigation li a:only-child:after {
    content: '';
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation a {
    display: block;
    padding: 0.82em 1em;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.5em;
    color: #FFF;
    font-weight: bold;
}

.main-navigation ul ul {
    white-space: nowrap;
    position: absolute;
    left: -999em;
    background: #2F2F2F;
    z-index: 99999;
    padding: 0;
    min-width: 100%;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul a {
}

.main-navigation ul ul li {
    width: 100%;
}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
    color: #FFF;
    background: #2F2F2F;
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
        background: #000;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a:hover,
.main-navigation .current-menu-item > a:hover {
    background: #4D4D4D;
}

.main-navigation .current_page_ancestor > a {
    background: #4D4D4D;
}

.main-navigation ul ul .curremt_page_parent {
    color: green;
    background: #313131;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
    display: none;
}

@media screen and (max-width: 600px) {
    .menu-toggle {
        display: block;
        height: 44px;
        padding: 0 1em;
        font-weight: normal;
        font-size: 14px;
        text-decoration: none;
        line-height: 1.5em;
        color: #FFFFFF;
        background: #2cb3b4;
        border: 0;
        box-shadow: none;
    }

    .main-navigation.toggled .nav-menu {
        display: block;
        border-top: 1px solid #FFFFFF;
        padding-left: 0;
        position: relative;
        min-width: 100%;
    }

    .main-navigation.toggled {
        min-width: 100%;
    }

    .main-navigation.toggled a {
        display: block;
        background: #2cb3b4;
        min-width: 100%;
    }

    .main-navigation.toggled ul {
        display: block;
        border-top: 1px solid #FFFFFF;
    }

    .main-navigation ul {
        display: none;
        padding-left: 0;
        float: none;
    }

}

html

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button>
            <div class="menu-guides-container"><ul id="primary-menu" class="menu"><li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-114"><a href="http://localhost/wordpress/index.php/achievement-guides/">Achievement Guides</a>
<ul class="sub-menu">
    <li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://localhost/wordpress/index.php/guides-11/">Guides 11</a></li>
    <li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="http://localhost/wordpress/index.php/guides-10/">Guides 10</a></li>
    <li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a href="http://localhost/wordpress/index.php/guides-8/">Guides 9</a></li>
    <li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://localhost/wordpress/index.php/guides-7/">Guides 7</a></li>
</ul>
</li>
<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-115"><a href="http://localhost/wordpress/index.php/map-completion-guides/">Map Completion Guides</a>
<ul class="sub-menu">
    <li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="http://localhost/wordpress/index.php/guides-15/">Guides 15</a></li>
    <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a href="http://localhost/wordpress/index.php/guides-14/">Guides 14</a></li>
    <li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="http://localhost/wordpress/index.php/guides-13/">Guides 13</a></li>
    <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="http://localhost/wordpress/index.php/guides-12/">Guides 12</a></li>
</ul>
</li>
<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-109"><a href="http://localhost/wordpress/index.php/guides-6/">Guides 6</a>
<ul class="sub-menu">
    <li id="menu-item-110" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-110"><a href="http://localhost/wordpress/index.php/guides-5/">Guides 5</a></li>
    <li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://localhost/wordpress/index.php/guides-4/">Guides 4</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://localhost/wordpress/index.php/guides-3/">Guides 3</a></li>
    <li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-123"><a href="http://localhost/wordpress/index.php/guides-16/">A Really Long Header Width</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://localhost/wordpress/index.php/guides-2/">Guides 2</a></li>
</ul>
</li>
<li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-122"><a href="http://localhost/wordpress/index.php/guides-16/">A Really Long Header Width</a>
<ul class="sub-menu">
    <li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121"><a href="http://localhost/wordpress/index.php/guides-16-2/">Guides 16</a></li>
</ul>
</li>
</ul></div></nav>

Answer 1

您的问题是您的 float 、绝对定位和负左边距正在级联到您的小屏幕媒体查询中。我建议您从基本的小屏幕规则开始您的导航样式，然后使用 @media screen 和 (min-width: 600px) 来声明您的大屏幕下拉菜单样式。这样你就不必重置所有那些导致你的小屏幕问题的 float 、定位、边距等。这样你的 CSS 会更有效率。