title: Drop Down menu to be in front if jquery dialog opened
body: <p>I have made a drop down menu which is working fine, but when i open a jquery dialog window, and then when i go for a drop down menu its menu is keep hiding behind the jquery dialog window, although i want the menu opened to be at front.</p>
  
  <p>this is jquery code.
      (document).ready(function() {</p>
  
  <pre><code>    $('#nav li').hover(function() {
          //show its submenu
          $('ul', this).slideDown(200);
  
      }, function() {
          //hide its submenu
          $('ul', this).slideUp(100);
      });
  
      $('ul li').click(function() {
          $('ul',this).slideUp(100);
      });
  });
  </code></pre>
  
  <p>I have tried z-index but it doesn't work either. Below is the css.</p>
  
  <pre><code>#nav {
  margin: 0 0 0 5px;
  padding: 0;
  list-style: none;
  }
  #nav li {
  float: left;
  display: block;
  position: relative;
  background: #025b87;
  z-index: 500;
  }
  
  #nav li a {
  display: block;
  padding: 8px 5px 0 5px; 
  height: 23px;
  text-decoration: none;
  color: #FFFFFF;
  text-align: left;
  color: #FFFFFF;
  }
  #nav li a:hover {   
  background-color: #d1d3d4;
  color: #000000;
  border-width:1px;
  }
  #nav li ul li a:hover { 
  background-color: #d1d3d4;
  color: #000000; 
  }
  </code></pre>