Jquery hover function not working in IE which is in a sub page invoked using ajax

I am having a jsp where i loading a simple drop down menu and getting the sub menu using ajax jquery.

I have a master jsp and when user selects a button invoking the dropdown jsp and showing it in the master jsp.

In firefox i am able to see all the submenus by howering on the main menu once the ajax call is completed.In IE though i am able to see the parent menus loaded after the ajax call i am not able to view the sub menus. It Seems that the hover function which is responsible for showing up of submenus is not getting triggered.. I am using Jquery1.4.4.min.js

NOTE:- If i put the entire code in a normal jsp the drop down menu works properly in IE. i am facing this problem when i invoke the page using an ajax call only.

Can anyone figure out what is the issue.

Following are the contents

JSP Code snippet invoked using ajax

<ul class="dropdown">
<li><a href="#">Books-Videos</a>



<ul class="sub_menu">
           <li><a href="#">Turf Management</a></li>
              <li><a href="#">Training</a>  
                  <ul  class="sub_menu">
                   <li><a href="#">Dugouts</a></li>
              <li><a href="#">Foul Poles</a></li>
              <li><a href="#">Netting</a></li>
              <li><a href="#">Scoreboards</a></li>
                  </ul>
                  </li>
            </ul>
          </li>
        </ul>

HOVER JS FUNCTION USED

$(function(){

    $("ul.dropdown li").hover(function(){

        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');

    }, function(){

        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');

    });

    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");

});

CSS STYLE USED

/* Dropdown style */
ul.dropdown { position: relative; width:145px; margin:20px 0px; z-index:9000; }
ul.dropdown li { list-style:none; zoom: 1; background: #ebebeb; margin-left:0px;}
ul.dropdown a:hover { color: #000; text-decoration:none;}
ul.dropdown a:active color: #ffa500; }
ul.dropdown li a { display: block; padding: 4px 8px; 
  border-bottom: 1px solid #fff; color: #222;text-decoration:none; }
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
u开发者_StackOverflow中文版l.dropdown li:hover { background: #dedede; color: black; position: relative; }
ul.dropdown li.hover a { color: black; }

/* LEVEL TWO */
ul.dropdown ul { width: 140px; visibility: hidden; 
  position: absolute; top: 0%; left: 140px; z-index:9000; }
ul.dropdown ul li { font-weight: normal; background: #dedede; color: #000; 
  border-bottom: 1px solid #ccc; float: none; margin:0px; }

/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right: none; display: block; margin: 0px; 
  color:#666; } 

/* LEVEL THREE */
ul.dropdown ul ul { left: 100%; top: 0; }
ul.dropdown li:hover > ul { visibility: visible; }

$("ul.dropdown li").live('hover', function(){}, function(){});

Use JQuery.live to bind events to dom elements that will be dynamically added later.

http://api.jquery.com/live/

Try using .delegate to "Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.":

$("ul.dropdown").delegate("li", "hover", function() {
    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');
}, function(){
    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');
});

.live pretty much does the same thing, however .live cannot be used in chaining - it needs to be used directly on a selector. Example:

// won't work
$("#foo").children("table").find("tr").live("click",function() {...

// will work
$("#foo").children("table").delegate("tr","click",function() {...

Furthermore, .live attaches event handlers to the document element if no context is specified, which can significantly impact performance. This performance hit can be mitigated by explicitly specifying the context (works with jQuery 1.4 +):

$("li",$("ul.dropdown")[0]).live("hover",function() {...

And lastly, you cannot stop the propagation of .live events. From the docs:

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will always propagate to the element to which they are delegated; event handlers on any elements below it will already have been executed by the time the delegated event handler is called.

To sum up, don't hesitate, use .delegate!