html - 菜单项不会彼此排成一行

我需要一些CSS帮助。我正在尝试修改phpBB样式（Absolution）以包括新的下拉项。你可以在这里看到它：

http://herb-talk.com/

我希望导航栏中的“产品”下拉列表模仿“搜索”下拉列表。这样做主要是因为我复制并粘贴了“搜索”下拉列表的代码。但是，将项目1和2悬停在同一行上。我希望Herbs'n Seeds位于Herb Kit下方。

我用惯常的技巧在Firebug中查看它并使用设置。我认为添加display：block可以解决问题，但显然没有。我想念一些东西。我不是CSS专家，我希望能有更多有经验的眼睛。

发布代码是一个挑战，因为它们全部来自phpBB的模板系统。这是菜单上“搜索”项的工作原理：

            <li class="float-right<!-- IF SCRIPT_NAME eq 'search' --> active<!-- ENDIF -->">
                <a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/search<!-- IF S_USER_LOGGED_IN -->-drop<!-- ENDIF -->.png" width="16" height="16" alt="" />{L_SEARCH}</a>
                <!-- IF S_USER_LOGGED_IN -->
                    <div style="clear: both;"></div>
                    <ul class="drop">
                        <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
                        <!-- IF S_LOAD_UNREADS -->
                            <li><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a></li>
                            <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
                            <li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
                        <!-- ENDIF -->
                    </ul>
                <!-- ENDIF -->
            </li>
            <li class="divider float-right"></li>
            <li class="float-right<!-- IF SCRIPT_NAME eq 'search' --> active<!-- ENDIF -->">
                <a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/search<!-- IF S_USER_LOGGED_IN -->-drop<!-- ENDIF -->.png" width="16" height="16" alt="" />{L_SEARCH}</a>
                <!-- IF S_USER_LOGGED_IN -->
                    <div style="clear: both;"></div>
                    <ul class="drop">
                        <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
                        <!-- IF S_LOAD_UNREADS -->
                            <li><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a></li>
                            <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
                            <li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
                        <!-- ENDIF -->
                    </ul>
                <!-- ENDIF -->
            </li>
            <li class="divider float-right"></li>

这是我的复制粘贴：

            <li class="float-right"><a href="http://homegrownherbalist-net.myshopify.com/collections/all">Products</a>
                <div style="clear: both;"></div>
                <ul class="drop">
                    <li style="display:block;"><a href="http://homegrownherbalist-net.myshopify.com/collections/herb-kits" target="_blank">Herb Kits</a></li>
                    <li style="display:block;"><a href="http://homegrownherbalist-net.myshopify.com/collections/herbs-n-seeds" target="_blank">Herbs 'n Seeds</a></li>
                    <li style="display:block;"><a href="http://homegrownherbalist-net.myshopify.com/collections/books" target="_blank">Books</a></li>
                </ul>
            </li>

最佳答案

您必须给#nav ul li ul.drop声明width: auto。当前设置为200px。

#nav ul li ul.drop {
    background: #ebf4fc;
    padding: 5px;
    position: absolute;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border: 1px solid #cee1f3;
    display: none;
    z-index: 9999;
    //width: 200px;
    width: auto; //change here
    margin-top: -5px;
}