Dropdown menu help

[bocahavoc]

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:


#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:


<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 (http://grafikspot.com.mx/clientes/petservice/)


Thanks