Хотите удалить изображения вкладок из моей вспомогательной навигации

У меня есть приложение 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-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)


Просто установите фоновое изображение на 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