recognizing html element in JQuery for CSS class under class.

recognizing html element in JQuery for CSS class under class.

My HTML code below has nested CSS classes
  1. <div class="homepage">
  2.       <section class="hp-top">
  3.             <div class="container">
  4.                   <div class="userMenu">
  5.                         <ul>
  6.                               <li><a href="#" class="home"><span></span></a></li>
  7.                               <li><a href="#" class="News"><span></span></a></li>
  8.                               <li><a href="#" class="about"><span></span></a></li>
  9.                               <li><a href="#" class="contactus"><span></span></a></li>
  10.                         </ul> 
  11.             </div>
  12. .....
  13. </div>


My JQuery function below need to use the span property.
  1. $(function() {
  2. // set opacity to null on page load
  3. $("<I want to specify "ul span" here>").css("opacity","0");
  4. // on mouse over
  5. $("<I want to specify " ul span"  here>").hover(function () {
  6. // animate opacity to full
  7. $(this).stop().animate({
  8. opacity: 1
  9. }, 'slow');
  10. },
  11. // on mouse out
  12. function () {
  13. // animate opacity to nill
  14. $(this).stop().animate({
  15. opacity: 0
  16. }, 'slow');
  17. });
  18. });
I tried this, with no luck.
  1. $( ".homepage .hp-top .container .userMenu ul span").css("opacity","0");
Please help me solve this issue. 

Thanks in Advance.