Menu items won't line up underneath each other

Question

I need some CSS help. I am trying to modify a phpBB style (Absolution) to include a new drop down item. You can see it here:

http://herb-talk.com/

I want the Products drop down on the navigation bar to imitate the Search drop down. It mostly does because I copied and pasted the code for the Search drop down. But items 1 and 2 are on the same line when you hover over it. I want Herbs 'n Seeds to be underneath Herb Kit.

I've used my usual tricks looking at it in Firebug and playing with settings. I figured adding display:block would do the trick but obviously it did not. I am missing something. I'd appreciate more experienced eyes as I am not a CSS guru.

Posting code is a challenge since it all comes out of phpBB's template system. Here is what works for the Search item on the menu:

            <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>

and here is my copy and paste:

            <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

You have to give #nav ul li ul.drop the declaration width: auto. Currently it's set to 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;
}

Answer 2

One possible solution seems to be adding .drop li {clear: both;}.

This specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

The clear property applies to both floating and non-floating elements.

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