Need some help assigning a mouseover event to display some icons that start out hidden.

For every <li> in the ul, I have icons. When the user mouses over the <li> I want the span tag with a class called "icons" to be displayed. When the mouse out event occurs remove the class and/or just hide the span. The problem for me is how to assign event so just the span tag and its contents appear and disapear when the mouse hovers over the <li>.

Heres the HTML:

<ul id="nav">
     <li>Cat 1
          <span class="icons">
              <div>stuff here</div>
          </span>
     </li>
     <li>Cat 2
          <span class="icons">
              <div>stuff here</div>
          </span>
             <ul>
                 <li>Sub Cat 2A
                     <span class="icons">
                         <div>2A stuff here</div>
                     </span>
                 </li>
             </ul>  
     </li>
</ul>

Heres my jquery code.

$('#nav li').each(function(){

                //Add Background Shading o Mouseover to all Rows in the menu
                $(this).mouseover(function(){ 
                        $(this).addClass("background_grey").removeClass("icons"); 
                })

                $(this).mouseout(function(){ 
                        $(this).removeClass("background_grey").addClass("icons"); 
                });
        });

Thanks for the help.