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>
