Искам да премахна изображенията на раздели от моята поднавигация

Имам приложение django, което има хоризонтална навигация. Хоризонталната навигация изглежда като изображението по-долу. въведете описание на изображението тук

Сега това, което искам да направя, е да редактирам поднавигацията за поръчки за съхранение. И за двата раздела „Доставка“ и „Поръчки за събиране“ искам и двата извити изображения на раздели да бъдат премахнати и двата раздела да са в правоъгълен фонов цвят, подобен на моите раздели. Нещо като това. Току-що сам редактирах това изображение.

base_menu.html

<ul id="toc">
        <li id="current"><a href="/bg{% url mmc.views.return_clients %}"><span>Home</span></a></li>
        <li><a href="/bg{% url mmc.views.quote_step1 %}"><span>Create quote/order</span></a></li>
        <li><a href="/bg{% url mmc.views.search_item %}"><span> Item Search</a></span></li>
        <li><a href="/bg{% url mmc.views.order_list %}"><span>Storage orders</span></a><br/>
        <ul class="subnav">
                <li><a href="/bg{% url mmc.views.order_list_service 1 %}"><span>Delivery orders</span></a></li><br/>
                <li><a href="/bg{% url mmc.views.order_list_service 2 %}"><span>Collection orders</span></a></li>
        </ul>
        </li>
        <li><a href="/bg{% url mmc.views.service_list 1 %}"><span>Delivery list</span></a></li>
        <li><a href="/bg{% url mmc.views.service_list 2 %}"><span>Collection list</span></a></li>
        <li><a href="/bg{% url mmc.views.invoice_list %}"><span>Export for invoicing</span></a></li>
        <li><a href="/bg{% url mmc.views.dbbackup %}"><span>Backup data</span></a></li>
        <li><a href="/bg{% 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-left: 20px;
    padding: 0;
    position relative;
}   

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;

}

ul.subnav  {
    float:left;
    display:none;
    position:absolute;
    margin-top:10px;
    z-index:999;
    padding-top:2px;
}

ul#toc li:hover .subnav {
    display:block;
}

Актуализация @Yule Направих това, което казахте, но нищо не се променя. Вместо това съм написал.

ul.subnav a {
  background: url(../images/squaretab.png)
}

И това ми дава това.

въведете описание на изображението тук

Сега тук U имате сиво изображение отляво, но само частично. Трябва напълно да премахна този зелен раздел. Как бих направил това?


person Shehzad009    schedule 14.09.2011    source източник


Отговори (1)


Просто задайте BG изображение на subnav li:

ul.subnav li{
  background: #ffffff url(../images/squaretab.png) no-repeat;
}
ul.subnav li a{
  background: none;
}
person Yule    schedule 14.09.2011