Div oculto que se despliega dentro de una lista¿?

[pann84]

Creo que no me he explicado bien, no trato de hacer una navegación por pestañas. Intentaré ser más gráfica, esta es la imagen que me pasó el diseñador, es un menú normal, vertical, que cuando haces click se pone en negrita con fondo blanco y se expande para ampliar información, cómo se ve en la imagen (haced click para verlo bien):
[URL=http://www.imaxenes.com/imagen/sin_t_tulo_11xl170i.jpg.html][IMG]http://www.imaxenes.com/mini/sin_t_tulo_11xl170i.jpg[/IMG][/URL]

El tema sería que en ese menú, al hacer click en cualquiera de los cursos disponibles, se expandiese como en la foto.

Digamos que este es el código básico sobre el que quiero hacer el efecto, he logrado introducir un div en los li que se oculta pero, dentro de ese div, no me permite hacer mas divs ni jugar con el estilo. A ver si podéis ayudarme

HTML

Código:

 <ul class="c2Ul">
            <li><a href="#">Instalador autorizado de gas categor&iacute;a B.</a><br />
              <div>
                <div class="hL">1</div> 
                <div class="hR">2</div> 
              </div>
            </li>
            <li><a href="#">Nuevo reglamento de distribuci&oacute;n y utilizaci&oacute;n de gas.</a><br />
              <div>
                <div class="hL">1</div> 
                <div class="hR">2</div> 
              </div>
            </li>
            <li><a href="#">Soldadura semiautom&aacute;tica mig/mag.</a><br />
              <div>
                <div class="hL">1</div> 
                <div class="hR">2</div> 
              </div>
            </li>
            <li><a href="#">Instalador autorizado de gas categor&iacute;a A.</a><br />
              <div>
                <div class="hL">1</div> 
                <div class="hR">2</div> 
              </div>
            </li>
            <li><a href="#">Nuevo reglamento de distribuci&oacute;n y utilizaci&oacute;n de gas.</a><br />
              <div>
                <div class="hL">1</div> 
                <div class="hR">2</div> 
              </div>
            </li>
          </ul>
        </div>

CSS

Código:

.c2Ul li div { 
  position: relative;
  display: none;
}
.c2Ul li:hover div {
	display: block;
	background: #fff;
    height: 60px;
    width: 325px;
}
.hL {
	display: block;
	width: 250px;
	height: 60px;
	float: left;
	background: #99F;
}
.hR {
	display: block;
	width: 75px;
	height: 60px;
	float: left;
	background: #F9F;
}

.c2Ul {
	margin-top: 25px;
}
.c2Ul li {
	display: block;
	border-bottom: 1px solid #ccc;
	margin: 15px 52px 2px 0;
	width: 325px;
	padding-left: 20px;
	height: auto;
	background: url(../img/vineta_c2.png) 1% 1% no-repeat;
}
.c2Ul li a{
	text-decoration: none;
	color: #333;
	font-family: Helvetica, sans-serif, Arial;
	font-size: 1.0em;
}
.c2Ul li:hover{
	font-weight: bold;
	background: url(../img/vineta_white.png) 1% 1% no-repeat;
}