html - 水平导航遇到一些问题

我有一个具有水平导航的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似乎可以工作。现在，从下面的图片中，我需要确保我的下拉框可以与交货标题重叠。而且我认为我可以完成。

最佳答案

尝试这个：

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类在弹出时仍处于事务流程中，因此会将其移至底部，如果您将其绝对放置，则相对于父级，它应将其固定。