Having some problems with a horizontal navigation - html

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"><span>Home</span></li>
<li><span>Create quote/order</span></li>
<li><span> Item Search</span></li>
<li><span>Storage orders</span><br/>
<ul class="subnav">
<li><span>Delivery orders</span></li><br/>
<li><span>Collection orders</span></li>
</ul>
</li>
<li><span>Delivery list</span></li>
<li><span>Collection list</span></li>
<li><span>Export for invoicing</span></li>
<li><span>Backup data</span></li>
<li><span>Help</span></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.