Я генерирую список категорий и его подкатегорий с помощью 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;}
Очень признателен!
Удалить 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*/
Здесь скрипка
Вы можете найти множество информации о том, как создавать списки стилей в учебнике
я не думаю, что любой другой способ list-style-type
виде стрелки. вам нужно внести некоторые изменения, как показано ниже.
<style type="text/css">
ul { list-style-image: url("/images/arrow.gif") }
</style>