clase que añade borde inferior

[rameau1982]

hola,
quiero hacer un css que tenga, por un lado un estilo de ul - li concreto. Por otro lado una clase que añade bordes inferiores. Es para un menú lateral. Lo que yo he pensado no funciona, porque? alguna sugerencia?
Gracias

Código:

#lateral{
	font : 18pt bold Garamond, Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif; 
	color : #00008B;
	float: right;
	width: 240px;
	border-left : 1px solid #696969;
	-moz-border-radius: 10px;
	border-top : 1px solid #696969;
	border-bottom: 1px solid #696969;
	
	
	}
#lateral a {
	font : 12pt Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif;
	color : #00008B;
	width: 200px;
	height: 20px;
          voice-family: "\"}\"";
          voice-family: inherit;
        text-decoration: none;
	img-decoration: none;
        }

#lateral a:link, #lateral a:visited {
        display: inline;
        }

#lateral a:hover, #lateral a:current {
	
    	}
#menu_lateral{
	list-style-image: none; list-style-type: none;
	margin: 0px;
	padding: 0px;
   	}
#menu_lateral li{

	text-align: right;
	padding: 0px 10px 0px 0px;

   	}
.lista{
	border-bottom: 1px solid #696969;
	}

y el html:

Código:

<div id="lateral">
	<ul id="menu_lateral">
	<li class="lista">BARCELONA</li>
  	<li><a href="mobile-world-congress-barcelona.html">MOBILE WORLD CONGRESS</a></li>
	<li><a href="bread-butter-barcelona.html">BREAD & BUTTER</a></li>
	<li>CANNES</li>
	<li><a href="mipim-cannes.html">MIPIM</a></li>
	<li><a href="festival-de-cannes.html">FESTIVAL DE CANNES</a></li>
	<li><a href="cannes-lion.html">CANNES LION</a></li>
	<li><a href="mipcom-cannes.html">MIPCOM</a></li>
	<li><a href="miptv-cannes.html">MIPTV</a></li>
	<li><a href="midem-cannes.html">MIDEM</a></li>
	<li><a href="mapic-cannes.html">MAPIC</a></li>
	</ul>
  </div>