Dando forma a una lista: se me suben encima las opciones!!

[xcoltx]

quizas te sirva este.. no te entendi mucho si querias que aparecieran abajo, o al lado?.. que se muestren los submenus o que se oculten? de todas formas prueba este script (no funciona para IE a menos que uses un "hack" para los menus ocultos.)

Código:

<style type="text/css">

/*Eliminar las sangrias*/
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	}
	
/*Posicion relativa para los menus*/
ul li {
	position: relative;
	}
	
/*Posicion absoluta para los submenus y posicionar a la derecha del menu*/	
li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}
	
/*Estilo a los enlaces*/	
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/*Estilo al cerrar menu*/	
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	}

li:hover ul { display: block;}
a:hover{ background-color:#666666; color:#FFFFFF;}


</style>

	<ul>
    	<li><a href="#">MENU 1</a>
        	<ul>
            	<li><a href="#">LINK 1</a></li>
                <li><a href="#">LINK 2</a></li>
                <li><a href="#">LINK 3</a></li>
                <li><a href="#">LINK 4</a></li>
      		</ul>
         </li>
         
         <li><a href="#">MENU 2</a>
         	<ul>
            	<li><a href="#">LINK 1</a></li>
                <li><a href="#">LINK 2</a></li>
                <li><a href="#">LINK 3</a></li>
      		</ul>
         </li>
         
         <li><a href="#">MENU 3</a>
         	<ul>
            	<li><a href="#">LINK 1</a></li>
                <li><a href="#">LINK 2</a></li>
                <li><a href="#">LINK 3</a></li>
      		</ul>
         </li>
   </ul>

Espero que te sirva.