I'm new to jQuery so sorry if this sounds stupid but I'm having truble drilling down to other elemnts. Paticularly I want to fade in the .menu li a:hover class with jquery.

.menu {

padding:0; margin:0; list-style:none; } .menu li { float:left; margin-left:1px; } .menu li a { display:block; height:44px; line-height:40px; padding:0 5px; float:right; color:#fff; text-decoration:none; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:12px; font-weight:bold; } .menu li a b { text-transform:uppercase; } .menu li a:hover { color:#E4FFC5; background: url(../images/arrow.png) no-repeat center bottom; } .current { background: url(../images/arrow.png) no-repeat center bottom; font-size:16px; font-weight:bold; } .spacer p { display:block; height:44px; line-height:40px; padding:0 5px; float:right; color:#fff; text-decoration:none; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:12px; font-weight:bold; }

<ul class="menu">
      <li class="current"><a href="index.html">Home</a></li>
      <li class="spacer">
        <p>|</p>
      </li>
      <li><a href="#">Mission &amp; Values </a></li>
      <li class="spacer">
        <p>|</p>
      </li>
      <li><a href="#">Caregivers</a></li>
      <li class="spacer">
        <p>|</p>
      </li>
      <li><a href="#">Special Programs </a></li>
      <li class="spacer">
        <p>|</p>
      </li>
      <li><a href="#">Enployment</a></li>
      <li class="spacer">
        <p>|</p>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>



<script type="text/javascript">

 $(function() {
  $('a').mouseover(function() {
   $('.logo').animate ({opacity:'0.6'}, 'normal');
  });

  $('a').mouseout (function() {
   $('.logo').animate ({opacity:'1'}, 'normal');



    $('.menu li a:hover').fadeIn ('slow');  





 });



</script>