different colors for different types of categories and sub categories in magento

Question

please visit this link : http://demo.kidsdial.com/

on top of the site, you can see "catalog search box "all categories" and search box.

if you hover mouse on dropdown symbol next to "all categories" text, you can see all categories.

a)ALL CATEGORIES b)BOYS TOYS c)ACTION & TOY FIGURES.

I want to give different colors for a) and b) and c)

pleas help me to find solution.

Answer 1

1. You should find out where and how in your "Best Friends" theme the list of categories is generated.

   This depends on your custom theme. So I'm not able to advise on where and how this is done. You could ask EM Themes where to look.

2. Then add different class names to the list elements, like class="topcat", class="subcat" and class="childcat". The result of the list should look like this.

   <div class="catsearch-dropdown">
       <span class="current">—– All Categories</span>
           <ul style="opacity: 0; display: none;" class="">
               <li class="topcat">—– All Categories</li>
               <li class="subcat">—–—– Boys Toys</li>
               <li class="childcat">—–—–—– Action &amp; Toy Figures</li>
               <li class="childcat">—–—–—– Arts &amp; Crafts</li>
               <li class="childcat">—–—–—– Bikes, Trikes &amp; Ride-Ons</li>
               <li class="childcat">—–—–—– Building Sets &amp; Blocks</li>
               ...
           </ul>
   </div>
   

3. Then add the following <CSS> to your styles.css file

   .catsearch-dropdown ul li.topcat {
       color: #090;
   }
   .catsearch-dropdown ul li.subcat {
       color: #f00;
   }
   .catsearch-dropdown ul li.childcat {
       color: #03f;
   }
   

4. The final result should look something like this