Question

I have a django app that has a horizontal navigation. For some reason I am having problems creating a drop down menu.

Have a look at both of these images

The first image shows the horizontal navigation. On the left side of the image, there is a menu.

The second image shows when I hover over Storage orders (This is the only link that has a drop down menu.) For some reason the right hand side of the tab seems a bit off. This is because the length of the tab for storage, delivery and collection are different due to the number of words. I want to try to make all of these three tabs the same length if possible.

Another problem that I have is the left hand side menu moves to the right when I move my curser over storage orders.

base_menu.html

<ul id="toc">
        <li id="current"><a href="{% url mmc.views.return_clients %}"><span>Home</span></a></li>
        <li><a href="{% url mmc.views.quote_step1 %}"><span>Create quote/order</span></a></li>
        <li><a href="{% url mmc.views.search_item %}"><span> Item Search</a></span></li>
        <li><a href="{% url mmc.views.order_list %}"><span>Storage orders</span></a><br/>
        <ul class="subnav">
                <li><a href="{% url mmc.views.order_list_service 1 %}"><span>Delivery orders</span></a></li><br/>
                <li><a href="{% url mmc.views.order_list_service 2 %}"><span>Collection orders</span></a></li>
        </ul>
        </li>
        <li><a href="{% url mmc.views.service_list 1 %}"><span>Delivery list</span></a></li>
        <li><a href="{% url mmc.views.service_list 2 %}"><span>Collection list</span></a></li>
        <li><a href="{% url mmc.views.invoice_list %}"><span>Export for invoicing</span></a></li>
        <li><a href="{% url mmc.views.dbbackup %}"><span>Backup data</span></a></li>
        <li><a href="{% url mmc.views.help_index %}" target="_blank" onclick="return showAddAnotherPopup(this);"><span>Help</span></a></li>
</ul>
<br/>

base.css

ul#toc {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul#toc li{
    background:#ffffff url(../images/tab.png);
    float: left;
    margin: 0 1px 0 0;

}


ul#toc span {
    background: url(../images/tab.png) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}


ul#toc a {
    color: #000000;
    height: 2em;
    float: left;
    text-decoration: none;
    padding-left: 10px;
}

ul#toc a:hover {
    background: url(../images/tab2.png);
    text-decoration: underline;
}

ul#toc a:hover span {
    background: url(../images/tab2.png) 100% 0;
    background-position: 100% -120px;

}

ul.subnav {
    float:left;
    display:none;
    position:absolute;
}

ul#toc li:hover .subnav {
    display:block;
}

EDIT: @Andres: If I make the change, you can see from the image below, the drop down tab needs to be lowered a bit more. Also, the collection tab is missing as well, but the good thing is the left hand menu does not shift to the right.

Update @Andres: I have removed the
tag in the template has made the tab re-appear. Now using margin-top:10px seem to work. Now from the image below, I need to make sure my drop-down box can overlap the delivery header. And I think I may be done.

Answer 1

Try this:

ul#toc {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul#toc li{
    background:#ffffff url(../images/tab.png);
    float: left;
    margin: 0 1px 0 0;
    position:relative;

}


ul#toc span {
    background: url(../images/tab.png) 100% 0;
    display: block;
    padding-right: 10px;
}


ul#toc a {
    color: #000000;
    float: left;
    text-decoration: none;
    padding-left: 10px;
}

ul#toc a:hover {
    background: url(../images/tab2.png);
    text-decoration: underline;
}

ul#toc a:hover span {
    background: url(../images/tab2.png) 100% 0;
    background-position: 100% -120px;

}

ul.subnav {
    float:left;
    display:none;
    position:absolute;
}

ul#toc li:hover .subnav {
    display:block;
}

since your ul.subnav class is still in the flow of things when it pops up it shifts things on the bottom, if you position it absolutely, relative to the parent li it should fix things up.