Html 响应3列下拉菜单

我想创建一个全宽度的下拉菜单栏类似于下面这个网站。

我已经可以对宽度做些改变了。然而，我很难弄清楚如何将子菜单分为3列。我总共有11个子菜单，我希望它出现在一个4x4x3的视图，如上图所示。我的当前外观如下：

如果你能告诉我怎么做，我将不胜感激

以下是我的代码摘要： HTML

<div class='nav' nav-menu-style="yoga">
                        <ul class="nav-menu">
                            <li> <a href="#brands">BRANDS</a>
                                <ul class="dropDownMenu"><h2>OUR BRANDS</h2>
                                    <li> <a href="#apotheke"> APOTHEKE BROOKLYN </a> </li>
                                    <li> <a href="#appelles"> APPELLES APOTHECARY </a> </li>
                                    <li> <a href="#atkinsons"> ATKINSONS LONDON </a> </li>
                                    <li> <a href="#balmain"> BALMAIN PARIS </a> </li>
                                    <li> <a href="#biology"> BIOLOGY SMART SKINCARE </a> </li>
                                    <li> <a href="#eco"> ECO </a> </li>
                                    <li> <a href="#kevinmurphy"> KEVIN MURPHY </a> </li>
                                    <li> <a href="#metis"> METIS </a> </li>
                                    <li> <a href="#soak"> SOAK </a> </li>
                                    <li> <a href="#usc"> URBAN SKINCARE CO </a> </li>
                                    <li> <a href="#zambeli"> ZAMBELI </a> </li>
                                </ul>
                            </li>
                            <li> <a href="#customDesign">CUSTOM DESIGN</a></li>
                            <li> <a href="#contact">CONTACT US</a></li>
                        </ul>
                    </div>

如果您使用纯css， 请尝试以下操作： 添加到您的ul class=“dropDownMenu”中

向您的li添加此ul

width: 33%;

在这种情况下，您应该将标题放在ul之外 不幸的是，我无法使您的代码正常工作，但总体而言，如果没有样式，它将如下所示：

---

我为你做了一把小提琴

我们的想法是只添加flex

<div class='nav'>
                        <ul class="nav-menu">
                            <li> <a href="#brands">BRANDS</a>
                                <div class="dropDownMenu" id="brands">
                  <h2>OUR BRANDS</h2>
                  <ul>
                    <li> <a href="#apotheke"> APOTHEKE BROOKLYN </a> </li>
                    <li> <a href="#appelles"> APPELLES APOTHECARY </a> </li>
                    <li> <a href="#atkinsons"> ATKINSONS LONDON </a> </li>
                    <li> <a href="#balmain"> BALMAIN PARIS </a> </li>
                    <li> <a href="#biology"> BIOLOGY SMART SKINCARE </a> </li>
                    <li> <a href="#eco"> ECO </a> </li>
                    <li> <a href="#kevinmurphy"> KEVIN MURPHY </a> </li>
                    <li> <a href="#metis"> METIS </a> </li>
                    <li> <a href="#soak"> SOAK </a> </li>
                    <li> <a href="#usc"> URBAN SKINCARE CO </a> </li>
                    <li> <a href="#zambeli"> ZAMBELI </a> </li>
                  </ul>
                                </div>
                            </li>
                            <li> <a href="#customDesign">CUSTOM DESIGN</a></li>
                            <li> <a href="#contact">CONTACT US</a></li>
                        </ul>
                    </div>


.dropDownMenu ul {
  display:flex;
  flex-wrap: wrap;
}
.dropDownMenu ul li {
   flex: 0 0 33.333333%;
   max-width: 33.333333%;
   position: relative;
    width: 100%;
    min-height: 1px;
}

我们的品牌

















.下拉菜单{
显示器：flex；
柔性包装：包装；
}
李先生{
弹性：0.33.333333%；
最大宽度：33.333%；
位置：相对位置；
宽度：100%；
最小高度：1px；
}

您是否使用任何框架/库使下拉菜单正常工作？不，只需简单的cssCan即可。请为您的代码创建一个提琴或代码段（运行）？我尝试将其放入JSFIDLE，但它不起作用，它在我的本地主机上起作用，尽管我担心的是必须有某种东西使您的代码正常工作，它在我的末端不起作用。我在哪里添加宽度？对不起，我弄糊涂了。你能送我一把小提琴吗？嗨。现在可以了！我在代码中唯一更改的是宽度。导航菜单>li>ul li{位置：相对；宽度：33%；文本对齐：居中；颜色：#ffffffff；}

width: 33%;

<div class='nav'>
                        <ul class="nav-menu">
                            <li> <a href="#brands">BRANDS</a>
                                <div class="dropDownMenu" id="brands">
                  <h2>OUR BRANDS</h2>
                  <ul>
                    <li> <a href="#apotheke"> APOTHEKE BROOKLYN </a> </li>
                    <li> <a href="#appelles"> APPELLES APOTHECARY </a> </li>
                    <li> <a href="#atkinsons"> ATKINSONS LONDON </a> </li>
                    <li> <a href="#balmain"> BALMAIN PARIS </a> </li>
                    <li> <a href="#biology"> BIOLOGY SMART SKINCARE </a> </li>
                    <li> <a href="#eco"> ECO </a> </li>
                    <li> <a href="#kevinmurphy"> KEVIN MURPHY </a> </li>
                    <li> <a href="#metis"> METIS </a> </li>
                    <li> <a href="#soak"> SOAK </a> </li>
                    <li> <a href="#usc"> URBAN SKINCARE CO </a> </li>
                    <li> <a href="#zambeli"> ZAMBELI </a> </li>
                  </ul>
                                </div>
                            </li>
                            <li> <a href="#customDesign">CUSTOM DESIGN</a></li>
                            <li> <a href="#contact">CONTACT US</a></li>
                        </ul>
                    </div>


.dropDownMenu ul {
  display:flex;
  flex-wrap: wrap;
}
.dropDownMenu ul li {
   flex: 0 0 33.333333%;
   max-width: 33.333333%;
   position: relative;
    width: 100%;
    min-height: 1px;
}