Duda con menú, hover y contenido

[pann84]

Seguramente es una tontería lo que voy a preguntar pero la novatería es lo que tiene.

Tengo un menú, es una lista normal y corriente, que en hover modifica su fondo y hace aparecer debajo cierto conenido. He hecho una pequeña imagen bastante simple para explicarme mejor. Cuando estás sobre el botón aparece el contenido del mismo debajo, mi problema es el siguiente, en el momento en que muevo un poco el ratón y me pongo sobre el contenido, desaparece el fondo del hover del botón de mi menú... no sé si me explico. La idea es que aunque el ratón esté sobre el contenido, el botón permanezca en su diseño hover...

Espero haberme explicado



Muchas gracias de antemano ^^

[MarioAlejandroCR2]

Creo que serviria el código no te entiendo aun el problema, ¿es si el mouse se mueve un poco del menu deleccionado, o si se sale?, por que de hacerlo asi seria normal... El código serviria

[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;
}

[pann84]

Vale... ya lo arreglé y si, era una tontería, no so voy a volver a poner todo el código, sólo el que cambié :P que estaba poniendo los atributos donde no correspondía, gracias de todos modos ^^

Código CSS

Código:

#courseNavi li:hover dt {
	font-size: 1.0em; 
	font-weight: 700;
	background: #fff url(../img/bg-menuraro.png) repeat-y top left;
}
#courseNavi li:hover .gt {
	color: #fff;
} 

[kseso?]

Veo que al final tomó el etiquetado y su css correspondiente sugeridos.

Me alegra saberlo

[pann84]

Iniciado por kseso?

Veo que al final tomó el etiquetado y su css correspondiente [URL="http://www.forosdelweb.com/f53/div-oculto-que-despliega-dentro-lista-832245/#post3529897"]sugeridos[/URL].

Me alegra saberlo

Si muchas gracias de nuevo, su código me sirvió de mucho ^^ le hice unos cambios para adaptarlo al diseño, pero lo cierto es que lo de las 2 listas ni se me había pasado por la cabeza. De nuevo gracias