在响应式菜单中使用 flexbox 定位答案

【问题标题】：Postion with flexbox in a responsive menu在响应式菜单中使用 flexbox 定位
【发布时间】：2019-08-23 10:13:32
【问题描述】：

我有一个 Wordpress 网站，有我自己的主题，基于下划线。

我正在努力学习 flexbox。

在移动设备上调整主菜单时，我的主菜单出现问题。

这是我的 HTML：

<header id="masthead">

    <div id="site-branding"><!-- LOGO ---></div>

    <nav id="site-navigation">
        <button id="mainnav-toggle" aria-controls="primary-menu" aria-expanded="false">Mon bouton pour mobile</button>
        <div class="menu-menu-principal-container">
            <ul id="primary-menu" class="menu nav-menu" aria-expanded="false">
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </nav> 

</header>

还有我的宽网站 CSS ：

#masthead {display:flex; align-items:center;}

#site-branding {width:30%;margin-right:10%;}
#site-navigation {width:60%;}

#mainnav-toggle {display: none;}

#primary-menu {display: flex; justify-content: space-between; align-items: baseline;}
#primary-menu li {list-style:none;}

所以现在，为了适应移动设备，我这样做了：

#masthead {/*No changes*/}

#site-branding {flex-basis: 56.333%; max-width: 56.333%;}
#site-navigation { -flex-basis: 14.667%; max-width: 14.667%; }

#mainnav-toggle {display: block; }

.menu-menu-principal-container {display: none; }
.toggled .menu-menu-principal-container {display: block;}

#primary-menu {flex-direction: column;}

但是缺少一些东西。 .menu-menu-principal-container 不在正确的位置。

我希望它在这个移动网站上做类似的事情：http://html.creativegigs.net/rogan/rogan-b/html/index-2.html。

我试图了解这个网站的 css：无法找到解决方案。

我试过 position : absolute on .menu-menu-principal-container

事实上，我尝试了很多事情。

但是没有任何效果，而且我快疯了。

我确定解决方案很简单，但有些地方我不明白。

那么，有什么想法吗？？

感谢阅读

【问题讨论】：

标签： css drop-down-menu flexbox responsive

【解决方案1】：

没有看到代码演示很难确定，但是如果您已将position: absolute; 添加到.menu-menu-principal-container，那么.menu-menu-principal-container 的父级#site-navigation 将需要相对定位 (#site-navigation { position: relative; }) 以确保其子项不会绝对定位到文档中的其他位置。

【讨论】：

【解决方案2】：

所以，我找到了答案……

也许它可以帮助别人 -

我刚刚添加了 left:0;和权利：0；到.menu-menu-principal-container

我不确定它是如何或为什么起作用的……但确实如此。

【讨论】：