Wordpress jQuery 菜单

Question

hi there im working on my web site

I'm looking to turn this navagation menu into a jQuery menu because it does not work in Internet Explorer:

As you know wordprees uses nested lists for its menu.

The dilema is i dont know where to start do I create the script that if an item hovers eg.

if $(".ul li").hover() then $(.ul ul).show()

here is the menu list that i need sorted `

 <div id="n" class="nav">
  <div class="menu">
   <ul>
   <li class="page_item page-item-5 current_page_item">
    <a href="http://www.webcarepreview.co.uk/mandalandscaping/" title="Home">Home
    </a>
   </li>
   <li class="page_item page-item-2">
    <a href="http://www.webcarepreview.co.uk/mandalandscaping/about/" title="Our Services">Our Services
    </a>
     <ul class='children'>
      <li class="page_item page-item-16">
       <a href="http://www.webcarepreview.co.uk/mandalandscaping/about/maintenance/" title="Maintenance">Maintenance
       </a>
      </li>
      <li class="page_item page-item-125">
       <a href="http://www.webcarepreview.co.uk/mandalandscaping/about/nidagravel/" title="Nidagravel">Nidagravel
       </a>
      </li>
      <li class="page_item page-item-213">
       <a href="http://www.webcarepreview.co.uk/mandalandscaping/about/timber-tech/" title="Timber Tech">Timber Tech
       </a>
      </li>
     </ul>
    </li>
    <li class="page_item page-item-7">
     <a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/" title="Galleries">Galleries
     </a>
      <ul class='children'>
       <li class="page_item page-item-76">
        <a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/garden-1/" title="Garden 1">Garden 1
        </a>
       </li>
       <li class="page_item page-item-104">
        <a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/garden-2/" title="Garden 2">Garden 2
       </a>
     </li>
     <li class="page_item page-item-134">
      <a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/garden-3/" title="Garden 3">Garden 3
      </a>
     </li>
     <li class="page_item page-item-209">
      <a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/decking/" title="Garden 4">Garden 4
      </a>
     </li>
    </ul>
   </li>
   <li class="page_item page-item-10">
    <a href="http://www.webcarepreview.co.uk/mandalandscaping/watch-video/" title="Project Videos">Project Videos
    </a>
   </li>
   <li class="page_item page-item-8">
    <a href="http://www.webcarepreview.co.uk/mandalandscaping/staff-profile/" title="About Us">About Us
    </a>
   </li>
   <li class="page_item page-item-6">
    <a href="http://www.webcarepreview.co.uk/mandalandscaping/contact/" title="Contact">Contact
   </a>
  </li>
 </ul>
</div>
    </div>
</div>

Can someone help me with this? Many thanks.

Answer 1

maybe this code can help.

jQuery(function(){

   jQuery("li").hover(function(){

      var ul = jQuery(this).parent();
      ul.show();

   });

});