Pierde su posicion

[dhincapier]

Tengo un problema, este menu desplegable esta fijo a la derecha,
Cuando se reduce el tamaño de la ventana, se monta encima del contenido, lo que quiero es que s qde fijo sin importar el tamaño de la ventana o resolucion de pantalla! Gracias por su ayuda



CSS DEL MENU
Código HTML:

Código:

/* ------------- Menú de Navegación -------------------------- */


#nav{margin:auto;position:absolute;top:10px;right:0px; padding-top:15px; text-align:right; /*margen con el div */}
#nav li{color:#FFFFFF; /*color base del texto*/float:left;width:11em;margin:auto;padding:0;list-style:none;background:transparent;font:11px Verdana,Tahoma,Helvetica,Sans-serif;text-align:center;position:relative;cursor:default;}
#nav li ul{padding-top:7px; /* referente a la parte superior */ margin:auto;}
#nav a{text-decoration:none;}
#nav li a{ color: #FFFFFF; font-weight: bold;}
#nav li a:hover{text-decoration:underline;}
#nav li li a:hover{text-decoration:none;}
#nav li li{filter:Alpha(opacity=50,finishopacity=50,style=1);/* Transparencia en Internet Explorer */}
#nav li li a{ border-color: #000; border-style:solid; border-width:0 2px 1px 2px; display:block;	color:#000000; font-weight: bold;background:transparent url(nav.png) 0px 0px repeat scroll; line-height:18px;}
#nav li li a:hover{color:#000000;background:transparent url(navhover.png) 0px 0px repeat scroll;/* Transparencia en Otros navegadores */}
li ul{padding:0.5em 0 1em 0;display:none;position:absolute;top:100%;left:0;}
li>ul{top:auto;left:auto;}
li li{float:left;border:0;display:block;background:transparent;}
li:hover ul,li.over ul{display:block;}

Código HTML:

Código:

<ul id="nav">
<li><a href="#" ><font color="#FFFFFF" size="-1">Paises</font></a>

  <ul> <li><a href="http://elitegourmetci.com/argentina/"><font color="#FFFFFF">Argentina</font></a></li>

  <li><a href="http://elitegourmetci.com/belgium/"><font color="#FFFFFF">Bélgica</font></a></li>

  <li><a href="http://elitegourmetci.com/colombia/"><font color="#FFFFFF">Colombia</font></a></li> 
  <li><a href="http://elitegourmetci.com/spain/"><font color="#FFFFFF">España</font></a></li>

  <li><a href="http://elitegourmetci.com/guatemala/"><font color="#FFFFFF">Guatemala</font></a></li>

  <li><a href="http://elitegourmetci.com/mexico/"><font color="#FFFFFF">Mexico</font></a></li> 
  <li><a href="http://elitegourmetci.com/peru/"><font color="#FFFFFF">Peru</font></a></li>

  <li><a href="http://elitegourmetci.com/usa/"><font color="#FFFFFF">Usa</font></a></li>

  <li><a href="http://elitegourmetci.com/Venezuela/"><font color="#FFFFFF">Venezuela</font></a></li>



 </ul>

[C2am]

Muestra el html que usas, digo, a parte del menu para ver como interactúa con el resto de la página. O tal vez un enlace.
Saludos

[C2am]

Hola
Recién veo el email.
Dejo el link que me pasaste: http://elitegourmetci.com/sitio/ para que todos puedan colaborar con vos.

[C2am]

El problema es la posición absoluta.
Tal vez si aplicas float: right a la imagen y quitas la position absolute del menu.

[xFantaSx]

Bueno pues a mi me ha salido así.

Primero cambiar la posición 'absolute' a 'relative' del ul con clase nav.
a ese mismo dejarle un top: -20px
y un right: -110px.

luego al div con id="conte_conte" ponerle la propiedad Clear:both

y al div id="social_sup" dejarle un padding-top: 9px.
y ya está!