水平ナビゲーションでいくつか問題がある

Question

私は水平ナビゲーションを持つdjangoアプリケーションを持っています。何らかの理由で私はドロップダウンメニューの作成に問題があります。

は、第1の画像は、水平方向のナビゲーションを示し、これらのイメージの両方

を見てください。画像の左側にメニューがあります。 2番目の画像は、ストレージオーダーに移動したときに表示されます（これはドロップダウンメニューを持つ唯一のリンクです）。何らかの理由で、タブの右側が少し外れているようです。これは、単語の数により、保管、配送、回収のためのタブの長さが異なるためです。可能であれば、これらの3つのタブのすべてを同じ長さにしたいと思っています。

私が持っているもう一つの問題は、私がカーソルをストレージオーダー上に移動すると、右側にメニューが移動することです。

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:私は変更を行う場合は、下の画像から見ることができる、ドロップダウンタブをもう少し下げる必要があります。また、コレクションタブも欠落していますが、左メニューが右に移動しないことが良い点です。

更新 @Andres：テンプレートの
タグを削除して、タブを再表示しました。 margin-top：10pxを使うとうまくいくようです。下の画像から、ドロップダウンボックスがオーバーレイの配信ヘッダーに重複していないことを確認する必要があります。そして私は私が終わるかもしれないと思います。

Answer 1

これを試してみてください：

それはに比べて、あなたは絶対にそれを置く場合には、下部に物事をシフトポップアップしたときに、あなたの ul.subnavクラスは、物事の流れにまだあるので、

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

親の物事を修正する必要があります。