Javascript nested list css

Javascript nested list css

I have a list below:
<ul>
<li>
<a>Link1</a>
<ul>
<li>
<a>SubLink1</a>
</li>
...
</ul>
</li>
<li>
<a>Link2</a>
</li>
...
</ul>
And would like to add 'css_class' to the current mouseovered <li> element:
document.getElements('li').addEvents({
mouseover: function(){
this.addClass('css_class');
},
mouseout: function(){
this.removeClass('css_class');
}
});
But this code is wrong as my parent<li> also has 'css_class'. How can I
fix this? Thanks.