html - 菜单项不会在彼此下方排列

Question

我需要一些 CSS 帮助。我正在尝试修改 phpBB 样式(赦免)以包含一个新的下拉元素。你可以在这里看到它:

http://herb-talk.com/

我希望导航栏上的产品下拉菜单模仿搜索下拉菜单。这主要是因为我复制并粘贴了搜索下拉列表的代码。但是，当您将鼠标悬停在元素 1 和元素 2 上时，元素 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>

Answer 1

一个可能的解决方案似乎是添加 .drop li {clear: both;}。

这指定一个元素是可以紧挨着它前面的 float 元素，还是必须向下移动(清除)在它们下面。

clear 属性适用于 float 和非 float 元素。

https://developer.mozilla.org/en-US/docs/Web/CSS/clear