title: JQuery : ul on hover for dropdown
body: <p>Trying to use jQuery's hover to visible/hide a ul item to give dropdown effect. </p>
  
  <p>Here is the jQuery. Ignore the alert functions</p>
  
  <pre><code>$(document).ready(function () { 
  
      $('ul.drop li').hover(
          function () {
              alert("asa");
              //show its submenu
              var isVisible = $(this).next('ui').is(':visible');
              alert("dvData is " + isVisible);
              var isHidden = $(this).next('ui').is(':hidden');
              alert("dvData is " + isHidden);
  
              $(this).next('ul').css({visibility: "visible", display: ""});
  
          }, 
          function () {
              //hide its submenu
              $(this).next('ul').css({visibility: "hidden", display: ""});
          }
      );
  
  });
  </code></pre>
  
  <p>Here is the jsp page </p>
  
  <pre><code>&lt;ul class="drop"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Main&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;Reporting
   &lt;ul &gt;
      &lt;li&gt;&lt;a href="#" target="_blank"&gt;Magellan Reports&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""/&gt;"  target="_blank"&gt;Script Reports&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  
  &lt;li&gt;&lt;a href="&lt;c:url value="#"/&gt;"   target="_blank"&gt;CMS&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="&lt;c:url value="#"/&gt;"  target="_blank"&gt;Operations&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is the css</p>
  
  <pre><code>ul#nav {padding-left:16px;background-image:url(../images/buehne_5_intra.gif)}
  clear {clear:both}
  ul.drop a {color:#87A7CE;line-height:14px;display:block;text-decoration: none;
  background-repeat:no-repeat;background-image:url(../images/diagonale_hauptnavigation.gif);background-position:right;
      height:10px;padding-right:22px; float:left;}
  ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; background: #039;
  color: #fff;}
  ul.drop { position: relative; z-index: 597; float: left; }
  ul.drop li { float: left; line-height: 1.0em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
  ul.drop li ul { visibility: hidden; position: absolute; top: 100%; left: 20px; z-index: 598; width: 150px; margin-left:50px;}
  ul.drop ul a {color:#87A7CE;line-height:14px;display:block;text-decoration: none;height:10px;padding-left:10px; float:left;background-image:none;}
  ul.drop ul li { float: none; }
  ul.drop ul ul { top: -2px; left: 100%; }
  .drop img{width:22px;height:24px;background-color:#039;margin-left:-20px;vertical-align:top}
  </code></pre>
  
  <p>I cud have done it with css alone, but some required,long, and corrupted css files are not allowing me to do so.. Please help with the jQuery.</p>