html - 无法为下拉菜单中的每一列设置标题

Question

我在网上获得的模板中有一个下拉菜单。这是下拉菜单的代码:

<!-- mega-menu start -->
<li class="dropdown mega-menu">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Clients</a>
  <ul class="dropdown-menu">
    <li>
      <div class="row">
        <div class="col-lg-8 col-md-9">
          <h4>Customers</h4>
          <div class="row">
            <div class="col-sm-4">
              <div class="divider"></div>
              <ul class="menu">
                <li><a href="page-about.html"><i class="icon-right-open"></i>About Us</a></li>
                <li><a href="page-about-2.html"><i class="icon-right-open"></i>About Us 2</a></li>
                <li><a href="page-about-3.html"><i class="icon-right-open"></i>About Us 3</a></li>
                <li><a href="page-about-me.html"><i class="icon-right-open"></i>About Me</a></li>
                <li><a href="page-team.html"><i class="icon-right-open"></i>Our Team - Options</a></li>
                <li><a href="page-services.html"><i class="icon-right-open"></i>Services</a></li>
              </ul>
            </div>

            <div class="col-sm-4">
              <div class="divider"></div>
              <ul class="menu">
                <li><a href="page-contact.html"><i class="icon-right-open"></i>Contact</a></li>
                <li><a href="page-contact-2.html"><i class="icon-right-open"></i>Contact 2</a></li>
                <li><a href="page-coming-soon.html"><i class="icon-right-open"></i>Coming Soon Page</a></li>
                <li><a href="page-404.html"><i class="icon-right-open"></i>404 error</a></li>
                <li><a href="page-faq.html"><i class="icon-right-open"></i>FAQ page</a></li>
                <li><a href="page-affix-sidebar.html"><i class="icon-right-open"></i>Sidebar - Affix Menu</a></li>
              </ul>
            </div>

            <div class="col-sm-4">
              <div class="divider"></div>
              <ul class="menu">
                <li><a href="page-left-sidebar.html"><i class="icon-right-open"></i>Left Sidebar</a></li>
                <li><a href="page-right-sidebar.html"><i class="icon-right-open"></i>Right Sidebar</a></li>
                <li><a href="page-two-sidebars.html"><i class="icon-right-open"></i>Two Sidebars</a></li>
                <li><a href="page-no-sidebar.html"><i class="icon-right-open"></i>No Sidebars</a></li>
                <li><a href="page-sitemap.html"><i class="icon-right-open"></i>Sitemap</a></li>
                <li><a href="page-invoice.html"><i class="icon-right-open"></i>Invoice <span class="badge">v1.1</span></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</li>

客户下拉菜单有三列。第一列的标题是客户。如何给第二列和第三列添加标题？每次我尝试这样做时，它都会弄乱下拉菜单的布局。

Answer 1

试试这个:

<li class="dropdown mega-menu">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Clients</a>
  <ul class="dropdown-menu">
    <li>
      <div class="row">
        <div class="col-lg-8 col-md-9">
          <div class="row">
            <div class="col-sm-4">
             <h4>Customers</h4>
              <div class="divider"></div>
              <ul class="menu">
                <li><a href="page-about.html"><i class="icon-right-open"></i>About Us</a></li>
                <li><a href="page-about-2.html"><i class="icon-right-open"></i>About Us 2</a></li>
                <li><a href="page-about-3.html"><i class="icon-right-open"></i>About Us 3</a></li>
                <li><a href="page-about-me.html"><i class="icon-right-open"></i>About Me</a></li>
                <li><a href="page-team.html"><i class="icon-right-open"></i>Our Team - Options</a></li>
                <li><a href="page-services.html"><i class="icon-right-open"></i>Services</a></li>
              </ul>
            </div>
        <div class="col-sm-4">
          <h4>Clients</h4>
          <div class="divider"></div>
          <ul class="menu">
            <li><a href="page-contact.html"><i class="icon-right-open"></i>Contact</a></li>
            <li><a href="page-contact-2.html"><i class="icon-right-open"></i>Contact 2</a></li>
            <li><a href="page-coming-soon.html"><i class="icon-right-open"></i>Coming Soon Page</a></li>
            <li><a href="page-404.html"><i class="icon-right-open"></i>404 error</a></li>
            <li><a href="page-faq.html"><i class="icon-right-open"></i>FAQ page</a></li>
            <li><a href="page-affix-sidebar.html"><i class="icon-right-open"></i>Sidebar - Affix Menu</a></li>
          </ul>
        </div>

        <div class="col-sm-4">
        <h4>Users</h4>
          <div class="divider"></div>
          <ul class="menu">
            <li><a href="page-left-sidebar.html"><i class="icon-right-open"></i>Left Sidebar</a></li>
            <li><a href="page-right-sidebar.html"><i class="icon-right-open"></i>Right Sidebar</a></li>
            <li><a href="page-two-sidebars.html"><i class="icon-right-open"></i>Two Sidebars</a></li>
            <li><a href="page-no-sidebar.html"><i class="icon-right-open"></i>No Sidebars</a></li>
            <li><a href="page-sitemap.html"><i class="icon-right-open"></i>Sitemap</a></li>
            <li><a href="page-invoice.html"><i class="icon-right-open"></i>Invoice <span class="badge">v1.1</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</li>