изменить стиль списка

0

Я генерирую список категорий и его подкатегорий с помощью wp_list_categories но он генерирует их список в ul и li. И я хотел бы изменить его стиль, изменив цвет каждой из категорий и удалив точку перед категориями и изменив точку на >

<ul class="footer_menu">    
<li class="cat-item cat-item-11">
    <a href="http://www.mytest.com/category/test1/">Test1</a>
    <ul class="children">
        <li class="cat-item cat-item-13">
            <a href="http://www.mytest.com/category/test1/sub-test1-1/">Sub test1 1</a>
        </li>
        <li class="cat-item cat-item-14">
            <a href="http://www.mytest.com/category/test1/sub-test2-1/">Sub test2 2</a>
        </li>
        <li class="cat-item cat-item-15">
            <a href="http://www.mytest.com/category/test1/sub-test3-1/">Sub test3 3</a>
        </li>
    </ul>
</li>
<li class="cat-item cat-item-4">
    <a href="http://www.mytest.com/category/test2/">Test2</a>
    <ul class="children">
        <li class="cat-item cat-item-16">
            <a href="http://www.mytest.com/category/test2/sub-test2-2/">Sub test2 1</a>
        </li>
        <li class="cat-item cat-item-18">
            <a href="http://www.mytest.com/category/test2/sub-test2-2/">Sub test2 2</a>
        </li>
        <li class="cat-item cat-item-19">
            <a href="http://www.mytest.com/category/test2/sub-test2-3/">Sub test2 3</a>
        </li>
    </ul>
</li>   

здесь мой CSS:

.content_footer_menu {background-color: #000;font-family: "Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif; margin:10px 0; color: #fff;}

ul.footer_menu {background-color: #000;font-size:11px; padding: 20px; margin: 10px 0 10px 240px; width: 1269px;}

.footer_menu, .footer_menu ul { line-height:1; margin:0; padding:0; }
.footer_menu li { float:left; padding:20px; margin: 0; list-style: disc; list-style-position: inside;}
.footer_menu a{ color:#999; text-decoration: none; }
.footer_menu a:hover { color:#fff;}
.footer_menu ul {padding: 0;}
.footer_menu ul { margin:0; padding: 20px 0 0 0;}
.footer_menu li li{float: none;padding: 0 20px 20px 0;}
.cleaner{clear: both;}
.current_page_item a{color: #fff;}
.footer_menu .current_page_item li a{color: #999;}

Очень признателен!

Теги:

2 ответа

1

Удалить list-style: disc; и добавьте следующее к вашему css:

ul{list-style-type: none;} /*removes the dot*/
li:before{content:">";} /*adds the arrow*/
.cat-item a{color:red;} /*changes the color*/

Здесь скрипка

Вы можете найти множество информации о том, как создавать списки стилей в учебнике

1

я не думаю, что любой другой способ list-style-type виде стрелки. вам нужно внести некоторые изменения, как показано ниже.

<style type="text/css">
ul { list-style-image: url("/images/arrow.gif") }
</style>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню