CSS: Why I can't use ID in this piece of code but with class it works?

Question

Hi I have a weird issue here with my menu. So I want to apply this transformation to just few links and for other just to not have it.

Here is the CSS for the transformation without any changes:

ul.menu > li > a:after,
ul.drop-down > li > a:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -webkit-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  background: red;
  border-bottom: 1px solid rgba(0,0,0,0.1);
 }

Now this is applied to every a tag in the ul with class "menu". OK that's fine but I want to apply this only to some links. so If I put ul.menu > li > a.foo:after it will work but if I use id there ul.menu > li > a#foo:after it won't work. Any reason why so?

The problem is that if I stick with using the class foo instead of the ID than on the next pice of code trying to apply the class foo to the .active state doesn't work:

ul.menu li a:hover:after,
ul.menu li a.active:after {
  width: 100%;
 }

So here if I apply ul.menu li a.foo:hover:after and ul.menu li a.foo.active:after is not going to work. Any ideas why so?

Here is how my links look without putting th class foo to the

<ul class="menu">
    <li><a <?php if ($active_state == 'news'): ?> class="active" <?php endif; ?>           href="bla"><span>News</span></a></li>
    <li><a <?php if ($active_state == 'lounge'): ?> class="active" <?php endif; ?> href="blaa"><span>Lounge</span></a></li>
</ul>   

Answer 1

This article contains information about the difference between ID and class. I believe because you'd have multiple ul.menu > li > a#foo's this won't work with ID. ID applies to one element.
http://css-tricks.com/the-difference-between-id-and-class/