Menú desplegable se desplaza de sitio

[luna690]

Hola,

he hecho un menú horizontal y uno de ellos se despliega hacia abajo con 6 opciones. Cuando éste submenú se "abre", se me mueven todos los textos que tengo en la parte inferior. Yo creo que es por alguna propiedad que le habré puesto. Pero no se cual.

Código HTML:

<div id="menu"><!-- Aqui el menu -->
                <ul id="menu-horizontal">
                    <li><a href="index.php?b=0">Inicio</a></li>
                    <li><a href="index.php?b=1">Quien somos</a></li>
                    <li><a href="">Proyectos realizados</a>
                    <ul>
                        <li><a href="index.php?b=2">Carteles</a></li>
                        <li><a href="index.php?b=3">Peanas</a></li>
                        <li><a href="index.php?b=4">Iluminaci&oacute;n</a></li>
                        <li><a href="index.php?b=5">Decoraci&oacute;n</a></li>
                        <li><a href="index.php?b=6">Industrial</a></li>
                        <li><a href="index.php?b=7">Cerveza</a></li>
                    </ul>
                    </li>
                    <li><a href="index.php?b=8">Contacto</a></li>
                </ul>
            </div> 

Y aquí el CSS:

Código:

#menu-horizontal { background-image: url('./webimages/breadcrumbImage.png'); background-position: -30px -30px; background-repeat:repeat-x; height: 30px; margin:0 auto; }
#menu-horizontal li { width: 180px; text-align:center; list-style:none;   }
#menu-horizontal li:hover { background-image: url('./webimages/breadcrumbImage.png'); background-position: -30px -120px; background-repeat:repeat-x; font-weight:bold; }
#menu-horizontal li a { text-transform:uppercase; font-style:italic; text-decoration:none; text-align: center; line-height: 30px; font-size: 13px; color: white; text-decoration: none;  }

#menu-horizontal li ul li{ float:none;  }

ul#menu-horizontal li { float: left; display: inline; position: relative; }
ul#menu-horizontal li:hover ul{ display: block; }

ul#menu-horizontal ul { display: none; position: relative; top: 30; left:0; margin:0; padding:0; }
ul#menu-horizontal ul li { display:block !important; font-weight:bold; width: 180px; background-color:#333; }
ul#menu-horizontal ul li:hover { display:block !important; background-image: url('./webimages/breadcrumbImage.png'); background-position: -30px -120px; background-repeat:repeat-x; font-weight:bold; width: 180px; }