Ayuda menu lista 100% ancho

gumer · #1 (**permalink**) 19/10/2010, 11:47

Buen día.
Dejo el presente codigo
Codigo CSS

Código:

ul.mnu000 {
  list-style:none;
  text-align:center;
  width:100%;  
  margin:0;	padding:0;
}

li.mnu001 { 
  background-color:#D8D8D8; 
  border:1px solid #000000;
  padding: 2px 2px 2px 5px;
  float:left;
}

.mnu002 {
  background-color:#848484;
  color: #ffffff; 
  display:none; 
  position:absolute;
  list-style:none;
  border:1px solid #000000;
  padding: 10px 2px 1px 5px;
}

Y el del menu en si.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">

<script>	
	function mnu000(ide000,ver000) {
		obj = document.getElementById(ide000);
		if(ver000)		
			obj.style.display = 'block';
		else
			obj.style.display ='none';
	}		
</script>
<link rel="stylesheet" type="text/css" href="index.css">
<body>
<ul class="mnu000">
  <li class="mnu001">MNU100</li>
  <li class="mnu001" onMouseOut="mnu000('mnu200',false);" onMouseOver="mnu000('mnu200',true);">MNU200
    <ul id="mnu200" onMouseOut="mnu000('mnu200',false);" onMouseOver="mnu000('mnu200',true);" class="mnu002">
      <li>MNU200</li>
      <li>MNU210</li>
      <li onMouseOut="mnu000('mnu220',false);" onMouseOver="mnu000('mnu220',true);">MNU220
        <ul id="mnu220" onMouseOut="mnu000('mnu220',false);" onMouseOver="mnu000('mnu220',true);" class="mnu002">
          <li>MNU220</li>
          <li>MNU221</li> 
          <li>MNU222</li>
        </ul>
      </li>
  </ul>
  </li>
<li class="mnu001">MNU300</li>
</ul>
</body>
</html>

Me gusta como quedo, pero el menu solo usa hasta donde llega, quisiera que use el 100% del ancho, he intentado varias formas, pero no me sale, haber si alguien me puede dar una mano.

lvfp · #2 (**permalink**) 19/10/2010, 12:38

¿Has probado lo que te dije de li .mnu001{width:33%}?

gumer · #3 (**permalink**) 19/10/2010, 12:43

Si claro, funciona, pero ... el problema es que es un menu para una pagina y no se cuantos iems van a tener... y si son cuatro seria 25% y si son 10 sera un 9% algo un poco mas facil como cuando pones una table y lepones width:100%; para que de el espacio al 100% de la lista pense en esto
.lu mnu001 {width:100% } Pero no me furuncia...

gumer · #4 (**permalink**) 19/10/2010, 14:14

UNA GRAN DUDA.
E estado haciendo este pequeño menu, en iexplorer 8, me salia muy bien, la lista debajo de la otra, y me salia muy bien, pero ahora no me sale asi, y exactamente no se por que ...

Le he echo estas modificación en el CSS

Código:

.mnu000 {
  list-style:none;
  margin:0px;
  padding:0px;	
}

li.mnu001 { 
  background-color:#D8D8D8; 
  border:1px solid #000000;
  padding: 1px 1px 1px 10px;
  float:left;
}

.mnu002 {
  background-color:#848484;
  color: #ffffff; 
  display:none; 
  position:absolute;
  border:1px solid #000000;
  padding: 5px 2px 1px 5px;
}

Y en la pagina ninguna..

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">

<script>	
	function mnu000(ide000,ver000) {
		obj = document.getElementById(ide000);
		if(ver000)		
			obj.style.display = 'block';
		else
			obj.style.display ='none';
	}		
</script>
<link rel="stylesheet" type="text/css" href="index.css">
<body>
<ul class="mnu000">
  <li class="mnu001">MNU100</li>
  <li class="mnu001" onMouseOut="mnu000('mnu200',false);" onMouseOver="mnu000('mnu200',true);">MNU200
    <ul id="mnu200" onMouseOut="mnu000('mnu200',false);" onMouseOver="mnu000('mnu200',true);" class="mnu002">
      <li>MNU200</li>
      <li>MNU210</li>
      <li onMouseOut="mnu000('mnu220',false);" onMouseOver="mnu000('mnu220',true);">MNU220
        <ul id="mnu220" onMouseOut="mnu000('mnu220',false);" onMouseOver="mnu000('mnu220',true);" class="mnu002">
          <li>MNU220</li>
          <li>MNU221</li> 
          <li>MNU222</li>
        </ul>
      </li>
    </ul>
  </li>
<li class="mnu001">MNU300</li>
</ul>

</body>
</html>

Lo que sale ahora es la lista muy a la derecha, pero no se por donde.