Quizás mi título no fue muy explísito, lo que quiero es ver que tengo que hacerle a este código para asignarle un ancho fijo y que el texto al tener ese largo, entonces que vaya a la línea de abajo, yo lo he hecho fácil asignándole un ancho fijo a un div y listo todo el texto que pongo ahí se va acomodando abajo.
Pero no encuentro cómo hacelo a este código que que he tratado y los resltados no son lo que espero.
Si tengo que dar algún dato más me dicen.
Lo otro es que no logro me me funcione en IE8 tal y como me funciona en FF, en FF perfecto , en IE8 aceptable pero sin sombras ni bordes redondos y un tin desacomodado.
Aquí les va el css:
Código HTML:
ul#css3menu1,ul#css3menu1 ul{ margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} ul#css3menu1 ul{ display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;} ul#css3menu1 li:hover>*{ display:block;} ul#css3menu1 li:hover{ position:relative;} ul#css3menu1 ul ul{ position:absolute;left:100%;top:0;} ul#css3menu1{ display:block;font-size:0;float:left;} ul#css3menu1 li{ display:block;white-space:nowrap;font-size:0;} ul#css3menu1>li,ul#css3menu1 li{ margin:0;} ul#css3menu1 a:active, ul#css3menu1 a:focus{ outline-style:none;} ul#css3menu1 a,ul#css3menu1 a.pressed{ display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;} ul#css3menu1 ul li{ float:none;margin:10px 0 0;} ul#css3menu1 ul a{ text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#000;text-decoration:none;} ul#css3menu1 li:hover>a{ background-color:#0c97e2;border-color:#C0C0C0;border-style:solid;font:bold 14px Trebuchet MS;color:#000000;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;} ul#css3menu1 img{ border:none;vertical-align:middle;margin-right:10px;} ul#css3menu1 img.over{ display:none;} ul#css3menu1 li:hover > a img.def{ display:none;} ul#css3menu1 li:hover > a img.over{ display:inline;} ul#css3menu1 li a.pressed img.over{ display:inline;} ul#css3menu1 li a.pressed img.def{ display:none;} ul#css3menu1 span{ display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;} ul#css3menu1 ul span{ background-image:url("arrowsub.png");padding-right:28px;} ul#css3menu1 a{ padding:10px;background-color:#c1c1c1;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;color:#000000;text-decoration:none;text-shadow:#FFF 0 0 1px;} ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{ background-color:#0c97e2;background-image:url("mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#000000;text-decoration:none;text-shadow:#FFF 0 0 1px;} ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{ background-color:#FFFFFF;background-image:none;font:14px Tahoma;color:#0978b3;text-decoration:none;} ul#css3menu1 li.topfirst>a{ border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;} ul#css3menu1 li.toplast>a{ border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
Código HTML:
<ul id="css3menu1" class="topmenu"> <li class="topfirst"><a href="#" title="Abastecimiento" style="width:118px;">Abastecimiento</a></li> <li><a href="#" title="Recreación" style="width:118px;"><span>Recreación</span></a> <ul> <li><a href="#" title="Item 1 0"><span>Item 1 0</span></a> <ul> <li><a href="#" title="Item 1 0 0">Item 1 0 0</a></li> </ul> </li> <li><a href="#" title="Item 1 1">Item 1 1</a></li> <li><a href="#" title="Item 1 2">Item 1 2</a></li> </ul> </li> <li><a href="#" title="Servicios Técnicos" style="width:118px;">Servicios Técnicos</a></li> <li><a href="#" title="Item 3" style="width:118px;">Inversiones</a></li> <li class="toplast"><a href="#" title="Item 4" style="width:118px;">Transporte</a></li> </ul>