How to set display none on <a> tag using css?

Question

I want that my categorybox display only subcategory

like

main category
subcategory 1
    subcategory 1_1
    subcategory 1_2
    subcategory 1_3
subcategory 2
    subcategory 2_1
    subcategory 2_2
subcategory 3
subcategory 4

I want to display like this

subcategory 1
subcategory 2
subcategory 3
subcategory 4

This is my HTML code and i am hide the parent category using css but i am not understood how can i hide the Shop by Brand and Concentrated Powders under Herbal Products

<div class="sideBoxContent" id="categoriesContent">
       <a href="index.php?main_page=index&amp;cPath=2" class="category-top">
             <span class="category-subs-parent">Product</span>
       </a>
       <br>
       <a href="index.php?main_page=index&amp;cPath=2_4" class="category-subs">&nbsp;&nbsp;Accupuncher Niddels 
       </a>
       <br>
       <a href="index.php?main_page=index&amp;cPath=2_7" class="category-subs">
            <span class="category-subs-parent">&nbsp;&nbsp;Herbal Products</span>
       </a>
       <br>
       <a href="index.php?main_page=index&amp;cPath=2_7_9" class="category-products">&nbsp;&nbsp;&nbsp;&nbsp;Concentrated Powders
       </a>
       <br>
       <a href="index.php?main_page=index&amp;cPath=2_7_8" class="category-products">&nbsp;&nbsp;&nbsp;&nbsp;Shop by Brand
       </a>
       <br>
       <a href="index.php?main_page=index&amp;cPath=2_10" class="category-products">&nbsp;&nbsp;Magnets, Pellets &amp; Tapes
       </a>
       <br>
       <a href="index.php?main_page=index&amp;cPath=2_3" class="category-products">&nbsp;&nbsp;New Arrival
       </a>
       <br>
<hr id="catBoxDivider">
</div>

My css like this

A.category-subs, A.category-subs:visited {

    color: #FF0000;

    text-decoration: none;

    }

    A.category-products, A.category-products:visited
    {
        display: none;
    }

but i am not get proper out put because it hide all the category-products and i want that it just hide only two as i mention above

Thanks in advance

Answer 1

Is this zen cart? If so i have just been through a similar issue myself creating a new categories menu where subcats appear on hover. I used the flyout categories menu (additional module - http://www.zen-cart.com/downloads.php?do=file&id=1290 ) which generates the categories subcats as a nested ul as suggested in comments, this is for zen cart 1.5 but similar things are available for older versions. if you delete the javascript, this one will work fine without animation and you can easily hide the elements you want to.

The only way I can think of to do it with the html you have is to use some jquery, you could then select a certain element and hide them that way. for example

$("#categoriesContent a:nth-child(4)").css('display','none');

to hide concentrated powders. But this would obviously go wrong if you added a category as the index of the elements would be altered. I suppose you could get round this instead by looping through the a elements with .each(), get their content with .html() of the a links to compare it to a particular string, eg, 'Concentrated powders' but this would get complicated and it would be much easier to change the html. In short I think you need to rethink your approach and check out the advanced categories mod or edit the current categoies template file which you will find in includes/templates/default_template/sideboxes/tpl_categories.php copy to your template directory and edit - ask another question if you need help with that.