Navigation menu being hidden by jquery picture viewer

As you can kind of see in the image below, my menu is dropping down below my photo viewer. The photo viewer is jquery and CSS. The menu is a implemented as an asp Menu. If anyone has any suggestions please let me know. Thanks

<asp:Menu ID="NavigationMenu"  StaticDisplayLevels="1" MaximumDynamicDisplayLevels="5" DataSourceID="menu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">

div.m开发者_运维知识库enu
{
     padding: 0px 0px 0px 0px;
     width:100%;
}

div.menu ul
{
    list-style: none;
}

div.menu ul.nav li
{
    display: inline;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #CC1111;
    color: #ffffff;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration:none;
    white-space: nowrap;
    font-size:large;
}

div.menu ul li a:hover
{
    background-color: #CC1111;
    color: #ffffff;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

You need to use z-index. Give higher value for div.menu and give lower value for image.

See this: http://www.w3schools.com/Css/pr_pos_z-index.asp

http://www.w3schools.com/Css/tryit.asp?filename=trycss_zindex

Give your menu a z-index value, such as

div.menu
{
     padding: 0px 0px 0px 0px;
     width:100%;
     position: relative;
     z-index:100;
}

My assumption is that theres one being set for the picture viewer as well, so you need yours to be higher.

Reference