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

gilberdesigns · #1 (**permalink**) 15/02/2010, 03:29

Hola! estoy haciendo un menu con listas y dandole forma con CSS, el problema es que necesito un atributo para que no se me solapen y no doy con el, os enseño el codigo:

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
ul {
	list-style: none;
}
ol {
	list-style: none;
}
ul li a {
	float: none;
	position:inherit;
	display:block;
	width:180px;
	height: 26px;
	text-decoration:none;
	vertical-align: middle;
}
ul ol li a {
	float:left;
	display:block;
	width:180px;
	height: 22px;
	text-decoration:none;
}
-->
</style></head>

<body>

	<ul>
    	<li><a href="#">MENU 1</a></li>
        	<ol>
            	<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>
      		</ol>
         <li><a href="#">MENU 2</a></li>
         	<ol>
            	<li><a href="#">LINK 1</a></li>
                <li><a href="#">LINK 2</a></li>
                <li><a href="#">LINK 3</a></li>
      		</ol>
         <li><a href="#">MENU 3</a></li>
         	<ol>
            	<li><a href="#">LINK 1</a></li>
                <li><a href="#">LINK 2</a></li>
                <li><a href="#">LINK 3</a></li>
      		</ol>
   </ul>

</body>

Cuando lo ejecuto me sale asi:

Sabeis como puedo hacer que salga todo bien alineado? graciaS!

Kaze71 · #2 (**permalink**) 15/02/2010, 07:27

Prueba con cambiar float:none; por clear:both;

Código:

ul li a {
  clear:both;
  position:inherit;
  display:block;
  width:180px;
  height: 26px;
  text-decoration:none;
  vertical-align: middle;
}

Saludos;

xcoltx · #3 (**permalink**) 15/02/2010, 07:32

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.

gilberdesigns · #4 (**permalink**) 15/02/2010, 08:16

Primero agradeceros por responderme

Igual me explique mal, mirad la imagen:

Quiero que salga asi:

MENU 1

LINK1 LINK2 LINK3

MENU 2

LINK1 LINK2 LINK3

MENU 3

LINK1 LINK2 LINK3

Que salga asi por pantalla resptando los margenes, ahora mismo, si os fijais, a partir de MENU 2 se montan unas encima de otras :(

Kaze71 · #5 (**permalink**) 15/02/2010, 08:37

Prueba con algo así:

Código HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
body,td,th {
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
ul {
    list-style: none;
}
ol {
    list-style: none;
}
ul li{
    clear:both;
}
ul li a {
    position:inherit;
    display:block;
    width:180px;
    height: 26px;
    text-decoration:none;
    vertical-align: middle;
}
ul ol li a {
    float:left;
    display:block;
    width:180px;
    height: 22px;
    text-decoration:none;
}
-->
</style></head>

<body>

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

</body>

gilberdesigns · #6 (**permalink**) 15/02/2010, 12:11

Cita:

Iniciado por Kaze71

Prueba con algo así:

Jeje P E R F E C T O.

Que Crack!!!!!!!

Voy a ojear bien el codigo para ver que tenia mal, gracias por la ayuda a todos