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

Question

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。

Answer 1

您需要更改#catlist ul. 做：

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

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

Answer 2

我想你正在寻找垂直 CSS 菜单，看看这个页面