desesperado con transición

[xFantaSx]

Hola, pues hace un tiempo utilizaba la propiedad transition a mi gusto, pero ahora no entiendo por qué razón no me está sirviendo :S he intentado todo, he re-leido todo pero no sé que es lo que pasa, por favor hechenme una ayudita.

quiero cambiar el ancho del submenú cuando salga en forma de transición, pero he intentado con el color pero no he podido. por favor ayudenme :(.
dejo el codigo aca

Código:

<style type="text/css">
<!--
ul.menu, ul.submenu {
  list-style:none;
  display: block;



}
ul.menu a, ul.submenu li a{
  display:block;


}
ul.submenu {
  display: none;
  position: absolute;
  width: 30px;
  height: 30px;
  margin-left:-6px;
  margin-top:2px;
  padding: 0px 5px 0px 5px;
  background-color:black;
-webkit-transition: color .25s ease-in 0s;
transition: color .25s ease-out 0s; 



}

ul.menu li.menum{
  display: block;
  float: left;
  width: auto;
  border: solid 1px black;
  padding: 2px 0px 2px 0px;
  margin: 0px -1px 0px 0px;

}

ul.menu li:hover ul.submenu {
  display: block;
  width: 430px;
  border: solid 1px black;
  background-color: green;
  -webkit-transition: color .25s ease-in 0s;
transition: color .25s ease-out 0s;     


}
ul.menu ul.submenu li.menus {
  display: block;
  float: left;  
  line-height: 30px;
  margin-left:-1px;
  border: solid 1px black;


 
}
ul.menu ul.submenu li.menus:hover .senalador {
  display: block;

}
ul.menu ul.submenu li.menus:first-child {
   margin-left:0px;

}
li.menus .senalador {
  display:none;
  height: 15px;
  border: solid 1px black;
  margin-left:-1px;
  margin-top:px;

}
a, a:visited {
  text-decoration:none;

}
-->
</style>

y este es el html.

Código:

<div id="containtermenu" style="margin-top:200px">
<ul class="menu">
  <li class="menum"><a href="">&nbsp&nbspInicio&nbsp&nbsp</a></li>
  <li class="menum"><a href="">&nbsp&nbspRegistro&nbsp&nbsp</a></li>
  <li class="menum"><a href="">&nbsp&nbspPruebas de pago&nbsp&nbsp</a></li>
  <li class="menum"><a href="">&nbsp&nbspMayores ingresos&nbsp&nbsp</a>
    <ul class="submenu">
      <li class="menus"><a href="">&nbspAnuncios&nbsp<div class="senalador"> </div></a></li>
      <li class="menus"><a href="">&nbspReferidos&nbsp<div class="senalador"></div></a></li>
      <li class="menus"><a href="">&nbspMembresías&nbsp</a><div class="senalador"></div></li>
      <li class="menus"><a href="">&nbspConseguir referidos directos&nbsp<div class="senalador"></div></a></li>
    </ul>
  </li>
  <li class="menum"><a href="">&nbsp&nbspProcesadores de pago&nbsp&nbsp</a></li>
  <li class="menum"><a href="">&nbsp&nbspAd-Alert&nbsp&nbsp</a></li>
</ul>
</div>