Possible to set 2 span classes to same unordered list in CSS

Question

I am using an unordered list as a vertical menu with sliding door CSS buttons. The longer items need to use a taller button to stay within the button size. I can make the left side of the taller button to show up by setting span class = tall but the right side is still showing the shorter button.

I am a newbie and have no idea how to fix this. Is it possible to set the short button span class = short and set the tall button span class = tall? Here is what I have so far. Basic answers please, fixing the code would be helpful as I am not sure how to write it.

ul {  
 width: 500px;  
 list-style: none;  
 position: relative;
}  
ul li {  
 display: block; /*For ignore double margin in IE6*/  
 margin: 25px 0px;  
}  
ul li a {  
 cursor: pointer;  
 float: left;  
 text-decoration: none;  
}    
/* button position */  
ul li a span {  
 margin: 0px 30px 0px -10px;  
 padding: 10px 0px 10px 30px;  
 position: relative; /*To fix IE6 problem (not displaying)*/  
 float: left;   
}  
/* short button mouseover */  
ul.nav li a.current, ul.nav li a:hover { /*causing the problem*/  
 background: url(short.png) no-repeat right;  
}  
ul.nav li a.current span, ul.nav li a:hover span{  
 background: url(short.png) no-repeat left;  
}  
/* tall button mouseover */  
ul.nav li a.current span.tall, ul.nav li span.tall a:hover { /*causing the problem*/  
 background: url(tall.png) no-repeat right;  
}  
ul.nav li a.current span.tall, ul.nav li a:hover span.tall {  
 background: url(tall.png) no-repeat left;  
}