Question

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.

this is jquery code.
(document).ready(function() {

    $('#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);
    });
});

I have tried z-index but it doesn’t work either. Below is the css.

#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; 
}

Answer 1

I have figured it out, the default zIndex of dialog is 1000 and i was giving 500 zindex to nav menu. so it means the higher the zindex is, the more priority of an element is to be. so i must give the value higher than the deafult zindex value of dialog. so i have given the #nav li zindex to 1500 or any value greater than 1000. now 1500>1000. so the priority of #nav li in the stack is now greater than the jquery dialog.