html - 大型菜单下拉菜单的宽度

Question

我有一个菜单栏，里面有一整行:网站之前的图片。

我希望菜单栏位于 Logo 和购物车之间。我通过执行以下操作解决了这个问题:

我添加了这个 CSS:

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 600px) { 
    .navbar-header { width:100%} 
}

并将 html 代码中的原始序列从:

<div class="navbar-header">
if(th_is_woocommerce_activated()) // Shopping cart
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">

到

<div class="navbar-header">
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
if(th_is_woocommerce_activated()) // Shopping cart

这部分解决了问题。但是 Mega 菜单现在在桌面和移动 View 上都非常小。网站在这里:

我希望下拉菜单的宽度与图片上的宽度相同。但是我不知道在哪里设置宽度？

Answer 1

问题在于，因为您将 display 设置为 flex，并且因为下拉菜单的宽度是相对于父项的，所以将其宽度设置为整个菜单的宽度并不容易。

如果我应用样式

.mega-sub-menu {
   width: 1200px;
   position: absolute;
   left: -200px;
}

我明白了...

由于多种原因，这是有问题的。

这个菜单很容易通过带有 flex-box 的 ftp 重建。我会这样做或尝试使用不同的插件。