Question

所以，我遇到的问题很难解释，但是，当我的页面宽度小于600px时，我试图使导航行为有所不同。我已经按照我想要的方式工作了，但当我点击600px以下的菜单按钮时，它会在其下方的内容顶部创建一个下拉列表，我希望它将内容移动到底部当菜单扩展时的菜单当然，当网站全宽时，我还是希望菜单能够超越内容。

CSS

<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>

HTML

var myApp = angular.module("myApp");

myApp.service("quoteCalculator", function () {
    var calculator = {
        getPrice: function (quoteData) {
            return 402.56;            
        }
    }
    return calculator;
});

Answer 1

你的问题是浮动，绝对定位和负左边距，它们会逐步落入你的小屏幕媒体查询。我建议您使用基本的小屏幕规则启动导航样式，然后使用@media screen and (min-width: 600px)声明大屏幕下拉菜单样式。这样您就不必重置所有导致小屏幕问题的浮动，定位，边距等。你的css会更有效率。

低于600px css问题

1 个答案: