<div id="subnav_products"><div id="nav">
<ul id="subnav_products">
[ your code ]
</ul>

and as css:

ul#subnav_products li a.active {
  color: #cc0000;
}

Looks to me like you have a nested ul inside the <ul id="subnav_products">, so you may need to adjust the rule to:

ul#subnav_products ul li a.active { 
    color: #cc0000;
}

Note the extra ul. See if that works. If not, can you post the HTML output?

<div id="leftnava"><div id="nav">

and CSS:

#leftnava ul li a:hover {
  color: #cc0000;
}
#leftnava ul li a.active {
  color: #cc0000;
}

<li><a class="active" href="http://example.dev/index.php?s=products&amp;c=tiger-brand">Tiger Brand</a></li>

it works fine.

#leftnava ul li a.active {
  color: #cc0000;
}

If you change it to:

#leftnava ul li.active {
  color: #cc0000;
}

Then it should work for the first example, which sets the active class to the li tag: <li class="active">. Hope this helps!

P.S. I am starting to “get” TxP a little more after this exercise

Is it possible to have an active class for the top category? Like this:

<ul>
   <li class="active">My Category
       <ul>
          <li>Sub Category1</li>
          <li>Sub Category2</li>
          <li>Sub Category3</li>
      </ul>
   </li>
</ul>

i added the following to my form that handles navigation:

<txp:section_list wraptag="ul" break="li" active_class="active" sections=", about, store, samples, contact, links" />