hola

estoy haciendo un menú con css y html

Html:

<nav id="menu">
               
                        <ul>
                       
                          <li class="op1"><a href="#">Opción 1</a>
                       
                            <ul>
                                <li><a href="#">Opción 1.1</a></li>
                                <li><a href="#">Opción 1.2</a></li>
                            </ul>
                       
                          </li>
                         
                        </ul> 
               
               
</nav>


-----------------------------------------------------------------------------------

Css:

#menu {
text-align: center;
font-size: 0.8em;
max-width:1000px;

z-index:99999;
border:1px solid #FF0000;
position:relative;


}



nav li{

   display:inline;
   
   


}

nav li a {
   position: relative;
   width: 110px;
   height: 29px;
   display: block;
   background:#FFFFFF;
   
   color: #44403b;
   text-decoration: none;
   font-size: 14px;
   padding-top: 12px;
   text-align: left;
   padding-left: 30px;
   font-weight: bold;
}

nav li ul li{

   display:none;


}

nav li:hover ul li{

   display:block;
   z-index:99999;
   position:relative;
   

}


---------------------------------------------------------------------

El problema que tengo es que cuando hago el hover en el menú, al desplegarse este el fondo de mi pagina web ( el cual es una galería ) se desplaza hacia abajo así como lo muestran las imágenes en los link a continuación:

http://www.roliagroup.com/doctorhenriquez.com/img1.jpg

http://www.roliagroup.com/doctorhenriquez.com/img2.jpg


Si alguien me pudiese ayudar se lo agradeceria

no despliega aun el menu...

alguien que me ayude por favor