在600px CSS之下

Question

因此，很難解決我遇到的問題，但是，當頁面寬度小於600px時，我試圖使導航行為有所不同。 我已經按照自己想要的方式工作了，但是當我單擊菜單按鈕時，當它的像素不足600像素時，它會在其下方的內容上方創建一個下拉菜單，我希望它可以將內容移至底部展開菜單。 當然，當站點為全角時，我仍然希望菜單位於內容的頂部。

的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

您的問題是浮動，絕對定位和負的左邊距正在級聯到小屏幕媒體查詢中。 我建議您以基本的小屏幕規則開始您的導航樣式，然后使用@media screen and (min-width: 600px)聲明您的大屏幕下拉菜單樣式。 這樣，您不必重置所有引起小屏幕問題的浮標，位置，邊距等。 這樣，您的CSS將更加高效。