Question

现在我的网站上有一个下拉菜单，只有一列，但我正在试图弄清楚如何让它显示2列，因为我列出了多少内容。

非常感谢任何帮助。这是我用于页面的代码：

<ul class="nav">
  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Traffic Generation&nbsp;<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="page.php">Introduction</a></li>
      <li><a href="page.php">Getting Started</a></li>
      <li><a href="page.php">Search Engines</a></li>
      <li><a href="page.php">Keywords</a></li>
      <li><a href="page.php">Tracking Traffic Sources</a></li>
      <li><a href="page.php">Forum Marketing</a></li>
      <li><a href="page.php">Creating a Newsletter</a></li>
      <li><a href="page.php">Email Signatures</a></li>
      <li><a href="page.php">Introduction to Articles</a></li>
      <li><a href="page.php">List Swaps</a></li>
      <li><a href="page.php">Article Marketing 2.0</a></li>
      <li><a href="page.php">Autoresponder Swaps</a></li>
      <li><a href="page.php">Online Giveaways</a></li>
      <li><a href="page.php">Latest Traffic Stats</a></li>
      <li><a href="page.php">Newsletter Contributor</a></li>
      <li><a href="page.php">Social Bookmarking</a></li>
      <li><a href="page.php">Classified Ads</a></li>
      <li><a href="page.php">Google Alerts and Omgili</a></li>
      <li><a href="page.php">Video Marketing</a></li>
      <li><a href="page.php">H.A.R.O</a></li>
      </li>
    </ul>
</ul>

这是用于菜单的CSS：

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 220px;
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top:0;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 0 0 3px 3px;
     -moz-border-radius: 0 0 3px 3px;
          border-radius: 0 0 3px 3px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

我试过加宽宽度，但似乎可以弄清楚如何让它在每一边显示相同数量的物品......

Answer 1

试试这个 CSS

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 220px;
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top:0;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 0 0 3px 3px;
     -moz-border-radius: 0 0 3px 3px;
          border-radius: 0 0 3px 3px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
     background-clip: padding-box;
width:420px;
}
.dropdown-menu > li{
    width:50%;
    float:left;
}

HTML：

<ul class="nav">
  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Traffic Generation&nbsp;<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="page.php">Introduction</a></li>
      <li><a href="page.php">Getting Started</a></li>
      <li><a href="page.php">Search Engines</a></li>
      <li><a href="page.php">Keywords</a></li>
      <li><a href="page.php">Tracking Traffic Sources</a></li>
      <li><a href="page.php">Forum Marketing</a></li>
      <li><a href="page.php">Creating a Newsletter</a></li>
      <li><a href="page.php">Email Signatures</a></li>
      <li><a href="page.php">Introduction to Articles</a></li>
      <li><a href="page.php">List Swaps</a></li>
      <li><a href="page.php">Article Marketing 2.0</a></li>
      <li><a href="page.php">Autoresponder Swaps</a></li>
      <li><a href="page.php">Online Giveaways</a></li>
      <li><a href="page.php">Latest Traffic Stats</a></li>
      <li><a href="page.php">Newsletter Contributor</a></li>
      <li><a href="page.php">Social Bookmarking</a></li>
      <li><a href="page.php">Classified Ads</a></li>
      <li><a href="page.php">Google Alerts and Omgili</a></li>
      <li><a href="page.php">Video Marketing</a></li>
      <li><a href="page.php">H.A.R.O</a></li>
      </li>
    </ul>
</ul>

Answer 2

您需要在元素数量之后使用包装div或指定的类。

e.g。

<ul class="dropdown-menu">
      <li class="left-side"><a href="page.php">Introduction</a></li>
      <li><a href="page.php">Getting Started</a></li>
      <li><a href="page.php">Search Engines</a></li>
      <li><a href="page.php">Keywords</a></li>
      <li><a href="page.php">Tracking Traffic Sources</a></li>
      <li><a href="page.php">Forum Marketing</a></li>
      <li><a href="page.php">Creating a Newsletter</a></li>
      <li><a href="page.php">Email Signatures</a></li>
      <li><a href="page.php">Introduction to Articles</a></li>
      <li><a href="page.php">List Swaps</a></li>
      <li class="right-side"><a href="page.php">Article Marketing 2.0</a></li>
      <li><a href="page.php">Autoresponder Swaps</a></li>
      <li><a href="page.php">Online Giveaways</a></li>
      <li><a href="page.php">Latest Traffic Stats</a></li>
      <li><a href="page.php">Newsletter Contributor</a></li>
      <li><a href="page.php">Social Bookmarking</a></li>
      <li><a href="page.php">Classified Ads</a></li>
      <li><a href="page.php">Google Alerts and Omgili</a></li>
      <li><a href="page.php">Video Marketing</a></li>
      <li><a href="page.php">H.A.R.O</a></li>

 </ul>

Answer 3

试试这个

    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
                                <b class="caret"></b></a>
                                <div class="dropdown-menu double">
                                    <ul class="twopart">
                                        <li><a href="page.php">Introduction</a></li>
                                        <li><a href="page.php">Getting Started</a></li>
                                        <li><a href="page.php">Search Engines</a></li>
                                        <li><a href="page.php">Keywords</a></li>
                                        <li><a href="page.php">Tracking Traffic Sources</a></li>
                                        <li><a href="page.php">Forum Marketing</a></li>
                                        <li><a href="page.php">Creating a Newsletter</a></li>
                                        <li><a href="page.php">Email Signatures</a></li>
                                        <li><a href="page.php">Introduction to Articles</a></li>
                                    </ul>
                                    <ul class="twopart">
                                        <li><a href="page.php">List Swaps</a></li>
                                        <li><a href="page.php">Article Marketing 2.0</a></li>
                                        <li><a href="page.php">Autoresponder Swaps</a></li>
                                        <li><a href="page.php">Online Giveaways</a></li>
                                        <li><a href="page.php">Latest Traffic Stats</a></li>
                                        <li><a href="page.php">Newsletter Contributor</a></li>
                                        <li><a href="page.php">Social Bookmarking</a></li>
                                        <li><a href="page.php">Classified Ads</a></li>
                                        <li><a href="page.php">Google Alerts and Omgili</a></li>
                                        <li><a href="page.php">Video Marketing</a></li>
                                        <li><a href="page.php">H.A.R.O</a></li>
                                    </ul>
                                </div>
</li>

CSS

                            .dropdown-menu.double
                            {
                                width: 400px;
                            }
                            .dropdown-menu .twopart
                            {
                                float: left;
                                list-style-type: none;
                                margin: 0;
                            }

                            .dropdown-menu > .twopart > li > a
                            {
                                display: block;
                                padding: 3px 20px;
                                clear: both;
                                font-weight: normal;
                                line-height: 20px;
                                color: #333333;
                                white-space: nowrap;
                            }
                            .dropdown-menu > .twopart > li > a:hover, .dropdown-menu > .twopart > li > a:focus
                            {
                                color: #ffffff;
                                text-decoration: none;
                                background-color: #0081c2;
                                background-repeat: repeat-x;
                                background-image: linear-gradient(to bottom, #0088cc, #0077b3);
                            }

如何使下拉显示2列

3 个答案: