Question

I’d like to build a very simple submenu:

HTML:

<ul>
  <li><a href="#">Main-item</a>
     <ul id="show">
        <li id="subitem"><a href="#">Sub-Item</a></li>
     </ul>
  </li>
</ul>

jQuery:

$(document).ready(function(){
  $('#access').hover(function () {
    $(this).find('ul').stop().animate({opacity:1, paddingTop:'10px'}, 400);
  }, function () {
    $(this).find('ul').stop().animate({opacity:0, paddingTop:'0px'}, 300);
  });
});

ul has a background image and I want the #show should be animate or not just all li

Answer 1

I can only imagine what you want to do.

Check out the sample and this jsFiddle

Sample

Html

<div id="access">
<ul>
  <li><a href="#">Main-item</a>
     <ul id="show">
        <li id="subitem"><a href="#">Sub-Item</a></li>
     </ul>
  </li>
  <li><a href="#">Main-item 2</a>
     <ul id="show">
        <li id="subitem"><a href="#">Sub-Item</a></li>
     </ul>
  </li>    
</ul>
</div>

jQuery

$(document).ready(function()
{
    $('li[id!="show"]').hover(function () {
        $(this).find('ul#show').stop().animate({opacity:1, paddingTop:'10px'}, 400);
    }, function () {
        $(this).find('ul#show').stop().animate({opacity:0, paddingTop:'0px'}, 300);
    })
});