html – 巨型菜单下拉列表的宽度

2023年11月4日 196次阅读

我有一个菜单栏有一整排：

在网站的图像之前.

我希望菜单栏位于徽标和购物车之间.我通过以下方式解决了这个问题：

我添加了这个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菜单都非常小.该网站在这里：

我希望dropmenu的宽度与图片的宽度相同.但我无法弄清楚在哪里设置宽度？

最佳答案 问题是因为你将display设置为flex并且因为下拉列表的宽度是相对于父级的,所以将宽度设置为整个菜单的宽度并不容易.

如果我应用这种风格

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

我明白了……
《html – 巨型菜单下拉列表的宽度》

由于多种原因,这是有问题的.

使用flex-box通过ftp重建这个菜单非常简单.我会这样做或尝试使用不同的插件.

点赞