Question

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

我希望导航栏上的“产品”下拉菜单模仿“搜索”下拉菜单。这主要是因为我复制并粘贴了搜索下拉列表的代码。但当您将鼠标悬停在同一条线上时，它们将位于同一条线上。我希望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;}。

指定元素是否可以位于其前面的浮动元素旁边，或者必须在它们下面向下移动（清除）。

clear属性适用于浮动和非浮动元素。

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

Answer 2

您必须提供#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;
}

菜单项不会排列在彼此之下

2 个答案: