Menu fica por cima do lightbox

Bom dia Galera estou com problemas no desenvolvimento de um projeto, em uma galeria onde uso lightbox, quando clico na foto pra ela ampliar e se transformar em lightbox ela fica por baixo do menu dropdown javascript.

Alguem pode me ajudar por favor?

Este é o css do menu

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {

 list-style: none;
 margin: 0;
 padding: 0;
 color:#FFFFFF;
}

ul.dropdown {

 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {

 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {

 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {

 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {

 float: none;
}

ul.dropdown ul ul {

 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {

 visibility: visible;
}

ul.dropdown li.rtl ul {

 top: 100%;
 right: 0;
 left: auto;
}

ul.dropdown li.rtl ul ul {

 top: 1px;
 right: 99%;
 left: auto;
}

<div id="menu" style="background:#fff;">
 <ul id="nav" class="dropdown dropdown-horizontal">
 <li><a href="index.php">HOME</a></li>

 <li><a href="./">TOP 10</a></li>

 <li><span class="dir">TV ELEELA</span>
 <ul>
 <li><a href="./">REPORTAGENS</a></li>
 <li><a href="./">MAKING OFF</a></li>
 </ul>
 </li>
 <li><span class="dir">BLOG</span>
 <ul>
 <li><a href="./">CONVIDADO</a></li>
 </ul>
 </li>
 <li><a href="./">ASSINE</a></li>
 <li><a href="./">CONTATO</a></li>
 </ul>
 </div>