在 PHP 生成后使用 CSS 在主要类别旁边显示子类别答案

【问题标题】：Displaying sub-categories next to the main categories using CSS after PHP generation在 PHP 生成后使用 CSS 在主要类别旁边显示子类别
【发布时间】：2012-08-27 00:40:32
【问题描述】：

1：我的数据库中有一个分级分类表：
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。

【问题讨论】：

标签： php jquery html css twitter-bootstrap

【解决方案1】：

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

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

尚未测试，但应该可以。下次使用代码而不是图片添加 jsfiddle，这将让我们使用您的确切代码并解决您的问题。

【讨论】：

【解决方案2】：

我想你正在寻找垂直 css 菜单，看看this page

【讨论】：