Foros del Web » Creando para Internet » CSS »

Menu horizontal y duda

Estas en el tema de Menu horizontal y duda en el foro de CSS en Foros del Web. Buenas, primero queria compartir este menu, el cual tiene muy buena pinta, cada apartado esta dividido por un espacio en diagonal, esta muy bien y ...
  #1 (permalink)  
Antiguo 29/09/2008, 12:13
 
Fecha de Ingreso: septiembre-2008
Mensajes: 9
Antigüedad: 9 años, 3 meses
Puntos: 0
Menu horizontal y duda

Buenas, primero queria compartir este menu, el cual tiene muy buena pinta, cada apartado esta dividido por un espacio en diagonal, esta muy bien y lo comparto con ustedes, pero por desgracia entre que entiendo poco de css y este menu lo encontre por internet, no puedo hacer que ocupe el 100% del width, les pongo todo lo relacionado con el estilo css y ademas el codigo que encontre para usarla, espero que les guste y espero su respuesta


CSS:

#outer {width:730px; height:200px; 0 -80px; padding-top:2px; border-top:10px solid #269; margin: o auto;}
#first {display:block; width:10%; height:0; overflow:hidden; border-top:25px solid #FFEE00; border-right:25px dashed transparent; float:left; margin-right:-23px;margin: o auto;}
#last {display:block; width:10%; height:0; overflow:hidden; border-bottom:25px solid #FFEE00; border-left:25px dashed transparent; float:left;margin: o auto;}

/* hacks for IE5.5 */
* html #first, * html #last {width:59px; height:25px; w\idth:34px; he\ight:0;}

#slants {padding:0; margin:0; list-style:none; margin: o auto; width::100%;}
#slants li {float:left; margin-right:-23px; }
#slants li a {display:block; float:left; height:25px; line-height:24px; background:transparent; color:#FFFFFF; text-decoration:none; cursor:pointer;width:15%;} /* add cursor:hand; for IE5.5 */
#slants li a span {display:block; float:left; width:16%; background:#363; height:25px; font-style:italic; text-align:center; font-family:georgia, "times new roman", serif;}
#slants li a b {display:block; float:left; width:0; height:0; overflow:hidden; border-top:25px dashed transparent; border-right:25px solid #363;}
#slants li a em {display:block; float:left; width:0; height:0; overflow:hidden; border-top:25px solid #363; border-right:25px dashed transparent;}

/* hacks for IE5.5 */
* html #slants li a b,
* html #slants li a em {width:25px; height:25px; w\idth:0; he\ight:0;}

#slants li:hover {position:relative;}
#slants li a:hover {color:#fff; white-space:normal; position:relative;}
#slants li:hover > a {color:#fff;}
<!-- ACA ESTA EL MENU, CUANDO HAGO EL HOVER -->
#slants li a:hover span {background:#696;}
#slants li:hover > a span {background:#696;}
#slants li a:hover b {border-right-color:#696;}
#slants li:hover > a b {border-right-color:#696;}
#slants li a:hover em {border-top-color:#696;}
#slants li:hover > a em {border-top-color:#696;}

/* use the table to position the dropdown list */
#slants table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:0;
top:0;
font-size:1em;
}
/* hide the sub level links */
#slants ul {
visibility:hidden;
position:absolute;
height:0;
left:-40px;
list-style:none;
width:100%;
top:25px;
background-color:#000000;
}
/* make the sub level visible on hover list or link */
#slants li:hover ul,
#slants a:hover ul{
visibility:visible;
width:100%;
}



#slants li:hover ul li a span,
#slants a:hover ul li a span {background:#7be;}
#slants li:hover ul li a b,
#slants a:hover ul li a b {border-right-color:#7be;}
#slants li:hover ul li a em,
#slants a:hover ul li a em {border-top-color:#7be;}

#slants li:hover ul li.odd a span,
#slants a:hover ul li.odd a span {background:#6ad;}
#slants li:hover ul li.odd a b,
#slants a:hover ul li.odd a b {border:0; border-top:25px solid #696; border-left:25px dotted transparent;}
#slants li:hover ul li.odd a em,
#slants a:hover ul li.odd a em {border:0; border-top:25px dotted transparent; border-left:25px solid #696;}

#slants li:hover ul li a:hover b,
#slants a:hover ul li a:hover b {border-right-color:#696;}
#slants li:hover ul li a:hover em,
#slants a:hover ul li a:hover em {border-top-color:#696;}
#slants li:hover ul li a:hover span,
#slants a:hover ul li a:hover span {background:#696;}

#slants li:hover ul li.odd a:hover b,
#slants a:hover ul li.odd a:hover b {border-top-color:#696;}
#slants li:hover ul li.odd a:hover em,
#slants a:hover ul li.odd a:hover em {border-left-color:#696; border-top-color:transparent;}
#slants li:hover ul li.odd a:hover span,
#slants a:hover ul li.odd a:hover span {background:#696;}



y este es el codigo HTML que lo usa:

<div id="outer">
<span id="first"></span>
<ul id="slants">
<li><a href="Inicio.htm"><b></b><span>Inicio</span><em></em><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
<li><a href=#><b></b><span>Mantenimiento</span><em></em><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
<li><a href=#><b></b><span>Logística</span><em></em><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
<li><a href=#><b></b><span>Contacto</span><em></em><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
<li><a href=#><b></b><span>Links</span><em></em><!--[if IE 7]><!--></a><!--<![endif]-->
</li>

</ul>
<span id="last"></span>
</div>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:47.