Hi. I'm having trouble with this dropdown menu I'm working on. Basically, whenever I hover over the element that makes the dropdown appear, the other elements in the menu move out of place.
I know it's happening because they're making room for the dropdown, but I can't make them stick by using 'position:' or even increasing the width parameters.

Any help is greatly appreciated.

Here's the CSS relevant code:

Code:
#navbar {
	background:url(../img/menu/menu-bg.png) no-repeat;
	float:left;
	margin: 60px 0 0 0;
	padding: 8px 0 0 0;
	width: 400px;
	height:38px;
}

#navbar:hover {
	background-position:-400px 0px;
}
#navbar li {
	margin-left:21px;
    list-style:none;
    float: left; }
#navbar li a {
	font-size:1.1em;
    display: block;
	height:28px;
    padding: 3px 8px;
	letter-spacing:-1px;
    text-decoration: none;
    color: #111;
    font-weight: bold; }
#navbar li a:hover {
    color:#fefefe;
    border-bottom: none;}
#navbar li ul {
    display: none;  }
#navbar li:hover ul, #navbar li.hover ul {
	background:url(../img/menu/menu-hover.png) no-repeat;
	height:135px;
	float:left;
    display: inline;
    left: 0;
    width: 155px;
}
	
#navbar li:hover li, #navbar li.hover li {
    float: none;
	display:inline;}
#navbar li:hover li a, #navbar li.hover li a {
	font-size:1.1em;
	line-height:1.3em;
    color: #111; }
#navbar li li a:hover {
    color: #fefefe; }
and here's the HTML part:

Code:
<ul id="navbar">
 <li><a href="#">Inicio</a>
 </li>
  <li><a href="#">Servicios</a><ul>
  <li><a href="entrenamiento">Entrenamiento</a></li>
  <li><a href="veterinaria">Veterinaria</a></li>
  <li><a href="estetica">Estética</a></li>
  <li><a href="hotel">Hotel</a></li></ul>
 </li>
  <li><a href="blog">Blog</a>
 </li>
  <li><a href="cform/index.html" params="lightwindow_width=380,lightwindow_height=500" class="lightwindow page-options">Contacto</a>
 </li>
</ul>



Thank you!

Here's the link for the site:

http://grafikspot.com.mx/clientes/petservice/

Link


Thanks