无法在下拉菜单

时间:2015-05-14 11:33:53

标签: html css drop-down-menu

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

<!-- 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>

客户端下拉菜单有三列。第一列有标题客户。如何给第二和第三列标题?每当我尝试这样做时,它都会混淆下拉列表的布局。

1 个答案:

答案 0 :(得分:0)

试试这个:

<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>