Duda con menú, hover y contenido

[pann84]

No puse el código porque me pareció un poco denso, pero ahora te lo pongo no hay poblema.

Este el el diseño, que mira que me está dando guerra:


Cuando pones el ratón sobre las diferentes partes del menú aparece debajo el contenido. Pero el fondo blanco que se ve en el botón y el símbolo > si mueves un poco el ratón desaparecen, y la idea es que permanezcan así aunque muevas el ratón, espero que ahora se me entienda mejor. El tema es que no cambien

HTML

Código:

 <div class="menuCursos">
        
            <ul id="courseNavi">
              <li>
                <dl class="expanded">
                     <dt><a href="#"><span class="gt">&gt;</span> Instalador autorizado de gas categor&iacute;a B.</a></dt>
                       <dd>Duraci&oacute;n: 80 horas</dd>
                       <dd>Fechas: marzo &ndash; julio de 2010</dd>
                       <dd>Horario: de 19 h a 21 h
                           <span>lunes, mi&eacute;coles y viernes</span>
                       </dd>
                </dl>
                  <ul class="moreInfo">
                     <li><a href="info.html">+info</a></li>
                     <li><a href="inscripcion.html">inscripci&oacute;n</a></li>
                     <li><a href="#">compartir</a></li>
                 </ul>
              </li>
              <li>
                <dl class="expanded">
                   <dt><a href="#"><span class="gt">&gt;</span> Nuevo reglamento de distribuci&oacute;n de gas.</a></dt>
                     <dd>Duraci&oacute;n: 80 horas</dd>
                     <dd>Fechas: marzo &ndash; julio de 2010</dd>
                     <dd>Horario: de 19 h a 21 h
                       <span>lunes, mi&eacute;coles y viernes
                       </span>
                   </dd>
                </dl>
                <ul class="moreInfo">
                   <li><a href="info.html">+info</a></li>
                   <li><a href="inscripcion.html">inscripci&oacute;n</a></li>
                   <li><a href="#">compartir</a></li>
                </ul>
              </li>
              <li>
                <dl class="expanded">
                   <dt><a href="#"><span class="gt">&gt;</span> Soldadura semiatum&aacute;tica mig/mag.</a></dt>
                     <dd>Duraci&oacute;n: 80 horas</dd>
                     <dd>Fechas: marzo &ndash; julio de 2010</dd>
                     <dd>Horario: de 19 h a 21 h
                       <span>lunes, mi&eacute;coles y viernes</span>
                   </dd>
                </dl>
                <ul class="moreInfo">
                  <li><a href="info.html">+info</a></li>
                  <li><a href="inscripcion.html">inscripci&oacute;n</a></li>
                  <li><a href="#">compartir</a></li>
                </ul>
              </li>
              <li>
                <dl class="expanded">
                  <dt><a href="#"><span class="gt">&gt;</span> Instalador autorizado de gas categor&iacute;a A.</a></dt>
                    <dd>Duraci&oacute;n: 80 horas</dd>
                    <dd>Fechas: marzo &ndash; julio de 2010</dd>
                    <dd>Horario: de 19 h a 21 h
                      <span>lunes, mi&eacute;coles y viernes</span>
                    </dd>
                </dl>
                <ul class="moreInfo">
                  <li><a href="info.html">+info</a></li>
                  <li><a href="inscripcion.html">inscripci&oacute;n</a></li>
                  <li><a href="#">compartir</a></li>
                </ul>
              </li>
              <li>
                <dl class="expanded">
                   <dt><a href="#"><span class="gt">&gt;</span> Nuevo reglamento de distribuci&oacute;n de gas.</a></dt>
                     <dd>Duraci&oacute;n: 80 horas</dd>
                     <dd>Fechas: marzo &ndash; julio de 2010</dd>
                     <dd>Horario: de 19 h a 21 h
                       <span>lunes, mi&eacute;coles y viernes
                       </span>
                   </dd>
                </dl>
                <ul class="moreInfo">
                   <li><a href="info.html">+info</a></li>
                   <li><a href="inscripcion.html">inscripci&oacute;n</a></li>
                   <li><a href="#">compartir</a></li>
                </ul>
              </li>
            </ul>
          </div>

CSS

Código:

.gt {
	color: #b6800d;
	margin: 0 5px 0 0px;
}
.expanded dt a:hover .gt  {
	color: #fff;
}
.menuCursos {
	margin: 20px 0 0 0; 
	padding: 0; 
	outline: 0; 
	position: relative;
	font-family: Helvetica, Verdana, Arial;
}
#courseNavi {
	list-style: none; 
	margin: 0 0 10px; 
	padding-left: 35px; 
	width: 370px; 
}
#courseNavi li {
	display: block; 
	padding: 0; 
	margin: 0;
}
#courseNavi li a {
	display: block; 
	text-decoration: none;
}
#courseNavi li a:hover {
	background: #fff url(../img/bg-menuraro.png) repeat-y top left;
}
#courseNavi li dd, #courseNavi li ul.moreInfo {
	display: none;
}
#courseNavi li:hover dt a {
	color: #2b2b2b; 
}
#courseNavi li:hover dd, #courseNavi li a:hover dd, #courseNavi li:hover ul, #courseNavi li a:hover ul {
	display: block;
}
#courseNavi dt {
	margin: 0; 
	padding: 0; 
	font-size: 1.0em; 
	font-weight: 100; 
	border-bottom: 1px solid #ccc;
}
#courseNavi dd {
	margin: 0;
	padding-left: 35px;
	font-size: 0.85em;
	text-align: left; 
}
#courseNavi dd span {
	display: block; 
	padding: 0 0 10px 43px; 
	margin-bottom: -10px; 
}
#courseNavi li:hover dt {
	font-size: 1.0em; 
	font-weight: 700;
}
.expanded dt a {
	display: block; 
	color: #2b2b2b; 
	padding: 5px 5px 0 0;
}
.expanded {
	margin-top: 10px;
}
.expanded dd, .expanded dd a {
	color: #666; 
	text-decoration: none; 
	display: block;
	background: #fff url(../img/bg-menuraro.png) repeat-y top left;
	padding-left: 30px;
}
#courseNavi li ul.moreInfo {
	position: relative; 
	right: 0; bottom: 0; 
	text-align: right; 
	font-size: 0.7em; 
	margin: -45px 0 0 0; 
	width: 60px; 
	float: right;
}
#courseNavi li ul.moreInfo a { 
	display: block; 
	color:#8a94c0;
	text-align: right;
	margin-right: 10px;
}
#courseNavi li ul.moreInfo a:hover { 
	color: #444;
}