有一些問題與水平導航

Question

我有一個具有水平導航Django應用程序。出於某種原因，我在創建下拉菜單時遇到了問題。

看一看這兩個圖像

第一個圖像顯示的水平導航的。在圖像的左側，有一個菜單。 第二張圖片顯示，當我將鼠標懸停在存儲訂單（這是有一個下拉菜單的唯一紐帶。出於某種原因）選項卡的右側，似乎有點過。這是因爲存儲，傳送和收集的標籤長度​​由於單詞的數量而不同。如果可能，我想盡量使這三個標籤的長度相同。

，我有另外一個問題是左側菜單中向右移動時，我提出我的光標在存儲訂單。

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

編輯：@Andres:如果我做出改變，你可以從下面的圖片看到，下拉標籤需要降低一點。此外，收集選項卡也丟失，但好處是左側菜單不會向右移動。

更新 @Andres：我刪除了模板中的
標記，使標籤重新出現。現在使用margin-top：10px似乎工作。現在從下面的圖片，我需要確保我的下拉框可以重疊交付頭。我想我可能會完成。

Answer 1

試試這個：

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

因爲你的ul.subnav類仍然是在事物的流動，當它彈出它的底部轉移的事情，如果你絕對位置，也相對於家長李應該解決問題。