quelques problèmes avec une navigation horizontale

Question

J'ai une application django qui a une navigation horizontale. Pour une raison quelconque, j'ai des problèmes pour créer un menu déroulant.

Jetez un oeil à ces deux images

La première image montre la navigation horizontale. Sur le côté gauche de l'image, il y a un menu. La seconde image montre quand je passe la souris sur les commandes de stockage (Ceci est le seul lien qui a un menu déroulant.) Pour une raison quelconque, le côté droit de l'onglet semble un peu hors tension. C'est parce que la longueur de l'onglet pour le stockage, la livraison et la collecte sont différentes en raison du nombre de mots. Je veux essayer de faire tous ces trois onglets de la même longueur si possible.

Un autre problème que j'ai est le menu latéral main gauche se déplace vers la droite quand je déplace mon curseur sur les commandes de stockage.

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: Si je fais le changement, vous pouvez voir de l'image ci-dessous, la liste déroulante l'onglet doit être abaissé un peu plus. En outre, l'onglet de collection est manquant aussi, mais la bonne chose est que le menu de gauche ne se déplace pas vers la droite.

Mise à jour @Andres: J'ai supprimé la balise
dans le modèle qui a fait réapparaître l'onglet. Maintenant, en utilisant margin-top: 10px semblent fonctionner. Maintenant, de l'image ci-dessous, je dois vous assurer que ma boîte déroulante peut chevauchement l'en-tête de livraison. Et je pense que je peux être fait.

Answer 1

Essayez ceci:

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

depuis votre ul.subnav classe est encore dans le flux des choses quand il apparaît qu'il déplace les choses sur le fond, si vous positionnez absolument, par rapport à la parent li il devrait arranger les choses.