I've never used jQuery before, but I am versed in a handful of programing languages. Yet, for some odd reason I cannot figure out this. I have an image, when you mouse over a submenu will appear, as long as you are hovering that submenu, the original image needs to remain in ":hover" state. So as best as I got this is how to do it, yet it doesn't work...here is all my code.

I've been trying to figure this out for sometime now. I thought it was in the CSS, but that wouldn't make since. I want to do this without using CSS to do the showing/hiding of the ".drop-programs ul" since if I use CSS to show/hide the hidden 'ul', there is no way to confirm that jQuery is working, since nothing else that I want to happen does...

Sorry, I am sure this is a dumb question, but I am stumped.

HTML/PHP Code

1. <div id="menu">
       <ul>
           <li><a href="<?PHP define_link('home',''); ?>"><div class="home"></div></a></li>
           <li><a href="<?PHP define_link('aboutus',''); ?>"><div class="aboutus"></div></a></li>
           <li class="drop-programs">
               <a href="<?PHP define_link('programs',''); ?>"><div class="programs"></div></a>
               <ul>
                   <li>Total Solution</li>
                   <li>Membership Campaign</li>
               </ul>
           </li>
           <li><a href="<?PHP define_link('faq',''); ?>"><div class="faq"></div></a></li>
           <li><a href="<?PHP define_link('resources',''); ?>"><div class="resources"></div></a></li>
           <li><a href="<?PHP define_link('blog',''); ?>"><div class="blog"></div></a></li>
           <li><a href="<?PHP define_link('contactus',''); ?>"><div class="contactus"></div></a></li>
       </ul>
   </div>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

 







Style Code

1. #menu { height: 56px; width: 535px; left: 106px; top: -20px; position: relative; float: left; }
   
   #menu .home, #menu .aboutus, #menu .programs, #menu .faq, #menu .resources, #menu .blog, #menu .contactus { background-position: top; height: 56px; float: left; }
   
   #menu .home { background: url(menu_home.png); width: 64px; }
   #menu .aboutus { background: url(menu_aboutus.png); width: 86px; }
   #menu .programs { background: url(menu_programs.png); width: 88px; }
   #menu .faq { background: url(menu_faq.png); width: 50px; }
   #menu .resources { background: url(menu_resources.png); width: 94px; }
   #menu .blog { background: url(menu_blog.png); width: 54px; }
   #menu .contactus { background: url(menu_contactus.png); width: 99px; }
   
   #menu .home:hover, #menu .aboutus:hover, #menu .programs:hover, #menu .faq:hover, #menu .resources:hover, #menu .blog:hover, #menu .contactus:hover { cursor: pointer; background-position: bottom; }
   
   #menu, #menu ul { list-style: none; }
   #menu, #menu * { padding: 0; margin: 0; }
   #menu li.drop-programs ul { display: none; text-align: left; position: absolute; top: 46px; left: 160px; height: 126px; width: 221px; background: url(menu-drop_programs.png) 0 0 no-repeat; z-index: 998; }
   #menu li.drop-programs ul li a { padding: 5px; height: 17px; }
   #menu li.drop-programs ul li a:hover { background-color: #333; }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

jQuery Code

1. $('.drop-programs').hover(
       function(){
           $('.drop-programs ul').css('display', 'block');
           $('.programs').css('background-position', 'bottom');
       },
       function(){
           $('.drop-programs ul').css('display', 'none');
           $('.programs').css('background-postion', 'top');
       }
   );