現在、Web サイトに 1 列しかないドロップダウン メニューがありますが、リストした項目の数が多いため、2 列を表示する方法を見つけようとしています。
どんな助けでも大歓迎です。ページに使用しているコードは次のとおりです。
<ul class="nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Traffic Generation <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;
}
幅を 2 倍にしようとしましたが、両側に同じ量のアイテムを表示する方法を理解しているようです...