Foros del Web » Creando para Internet » CSS »

Duda con menú, hover y contenido

Estas en el tema de Duda con menú, hover y contenido en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 26/08/2010, 05:20
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Duda con menú, hover y contenido

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 ^^
  #2 (permalink)  
Antiguo 26/08/2010, 05:25
Avatar de MarioAlejandroCR2  
Fecha de Ingreso: mayo-2010
Ubicación: Esparza - Puntarenas
Mensajes: 98
Antigüedad: 7 años, 6 meses
Puntos: 2
Respuesta: Duda con menú, hover y contenido

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
  #3 (permalink)  
Antiguo 26/08/2010, 05:48
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: Duda con menú, hover y contenido

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;
}
  #4 (permalink)  
Antiguo 26/08/2010, 06:24
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: Duda con menú, hover y contenido

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;
} 
  #5 (permalink)  
Antiguo 26/08/2010, 07:37
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Duda con menú, hover y contenido

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

Me alegra saberlo
  #6 (permalink)  
Antiguo 27/08/2010, 02:15
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: Duda con menú, hover y contenido

Cita:
Iniciado por kseso? Ver Mensaje
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

Etiquetas: contenido, hover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:10.