顯示子類別旁邊使用CSS PHP一代又

Question

1的主要類別：我在我的數據庫類別的hierichal表：
2：我做了這個PHP腳本，打開此表到HTML：http://pastie.org/4591869

3：HTML看起來像這樣：

<script> 
        function toggleSubCategories(button) { 
         button = $(button); 
         button.parent().next().each(function() { 
          $(this).css('display') == 'none' ? $(this).css('display', 'inline') : $(this).css('display', 'none'); 
         }); 
        } 
       </script> 
       <div id="catlist"> 
        <li> 
         <button onclick="toggleSubCategories(this)" class="btn btn-primary">Lots</button> 
        </li> 
        <ul style="display: inline; "> 
         <li> 
          <button onclick="toggleSubCategories(this)" class="btn btn-info">Town Lots</button> 
         </li> 
         <li> 
          <button onclick="toggleSubCategories(this)" class="btn btn-info">Bux Lots</button> 
         </li> 
         <li> 
          <button onclick="toggleSubCategories(this)" class="btn btn-info">Wild Lots</button> 
         </li> 
        </ul> 
        <li> 
         <button onclick="toggleSubCategories(this)" class="btn btn-primary">Items</button> 
        </li> 
        <ul> 
         <li> 
          <button onclick="toggleSubCategories(this)" class="btn btn-info">Blocks</button> 
         </li> 
         <li> 
          <button onclick="toggleSubCategories(this)" class="btn btn-info">Tools</button> 
         </li> 
         <ul> 
          <li> 
           <button onclick="toggleSubCategories(this)" class="btn btn-success">Enchanted</button> 
          </li> 
          <li> 
           <button onclick="toggleSubCategories(this)" class="btn btn-success">Normal</button> 
          </li> 
         </ul> 
        </ul> 
        <li> 
         <button onclick="toggleSubCategories(this)" class="btn btn-primary">Services</button> 
        </li> 
        <ul style="display: none; "> 
         <li> 
          <button onclick="toggleSubCategories(this)" class="btn btn-info">Trader Services</button> 
         </li> 
         <li> 
          <button onclick="toggleSubCategories(this)" class="btn btn-info">Constructor Services</button> 
         </li> 
         <li> 
          <button onclick="toggleSubCategories(this)" class="btn btn-info">Politician Services</button> 
         </li> 
        </ul> 
        <li> 
         <button onclick="toggleSubCategories(this)" class="btn btn-primary">Labour</button> 
        </li> 
       </div> 

4：我也有這個CSS文件：

#catlist { 
    list-style: none; 
    display: block; 
} 

#catlist ul { 
    list-style: inherit; 
    display: none; 
} 

#catlist ul li { 
    display: block; 
    list-style: inherit; 
} 

#catlist button { 
    width: 200px; 
    height: 50px; 
    margin: 5px; 
    font-size: 2.5em; 
    display: inline; 
} 

5：這個目前看起來像這樣（後我點擊第一個主要類別）： 6：但我想它是這樣的：

我在做什麼錯？我真的在這裏拉我的頭髮。
我正在使用CSS3，HTML5，JQuery，PHP和Twitter Bootstrap。

Answer 1

我認爲你正在尋找垂直的CSS菜單，看看this page

Answer 2

您需要更改的#catlist ul定位。做：

#catlist { position: relative; } 
#catlist ul { position: absolute; top: 0; left: 220px; } 

沒有測試過，但應該工作。下一次添加代碼而不是圖片的jsfiddle，這將讓我們玩你的確切代碼並解決你的問題。