如何使下拉顯示2列

Question

現在我在我的網站上有一個下拉菜單，只有一列，但我想弄清楚如何讓它顯示2列，因爲我列出了多少東西。

任何幫助將不勝感激。下面是我使用的頁面代碼：正用於菜單中的CSS

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

這裏：

.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

您需要在元素數量之後使用包裝div或指定的類。

例如

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

試試這個 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 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); 
          }