Foros del Web » Creando para Internet » Diseño web »

Problema menu vertical hacia abajo y trancision de opacidad

Estas en el tema de Problema menu vertical hacia abajo y trancision de opacidad en el foro de Diseño web en Foros del Web. el problema que tengo es que tengo un menu desplegable hacia abajo hecho con css y en mi pagina tengo una capa con transicion que ...
  #1 (permalink)  
Antiguo 08/03/2012, 18:17
Avatar de rapstreet  
Fecha de Ingreso: marzo-2012
Ubicación: Cordoba
Mensajes: 1
Antigüedad: 12 años, 1 mes
Puntos: 0
Pregunta Problema menu vertical hacia abajo y trancision de opacidad

el problema que tengo es que tengo un menu desplegable hacia abajo hecho con css y en mi pagina tengo una capa con transicion que pasa de menos opacidad a mas opacidad. el problema es que cuando despliego el menu este se sobrepone a la capa y cuando quiero elegir una opcion del menu que esta por encima de la capa el menu desaparece. no se si me entienden. ni si quiera se como resolverlo.


les dejo el codigo de mi menu
Cita:
echo '<div id="menu">
<ul>
<li class="nivel1"><a href="index.php" class="nivel1">Inicio</a></li>
<li class="nivel1"><a href="#" class="nivel1">Futbol</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opci?n 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="historiadelfutbol.php">Historia</a></li>
<li><a href="historiareglasdejuego.php">Historia del Reglamento</a></li>
<li><a href="reglasdejuego.php">Reglas de Juego</a></li>
<li><a href="videoreglasdejuego.php">Video Reglas</a></li>
<li><a href="aclaraciones.php">Aclaraciones de las Reglas</a></li>
<li><a href="aclaracionesarbitraje.php">Aclaraciones Arbitraje</a></li>
<li><a href="manualinformes.php">Manual de Informes</a></li>
<li><a href="modeloinforme.php">Modelo de Informes</a></li>
</ul>
</div>

el codigo del estilo del menu
Cita:
#menu { text-align: center;
font-size: 17px;
width: 820px;
margin: 20px auto;
font-family:"neord";
opacity:0.95;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
border: solid 1px #fff;
padding: 8px;
position: relative;
background: #b4ddb4; /* Old browsers */
background: -moz-linear-gradient(top, #b4ddb4 0%, #83c783 15%, #52b152 38%, #008a00 72%, #005700 89%, #002400 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4ddb4), color-stop(15%,#83c783), color-stop(38%,#52b152), color-stop(72%,#008a00), color-stop(89%,#005700), color-stop(99%,#002400)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b4ddb4 0%,#83c783 15%,#52b152 38%,#008a00 72%,#005700 89%,#002400 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b4ddb4 0%,#83c783 15%,#52b152 38%,#008a00 72%,#005700 89%,#002400 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b4ddb4 0%,#83c783 15%,#52b152 38%,#008a00 72%,#005700 89%,#002400 99%); /* IE10+ */
background: linear-gradient(top, #b4ddb4 0%,#83c783 15%,#52b152 38%,#008a00 72%,#005700 89%,#002400 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 3px;
-webkit-border-top-right-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius: 3px;
-moz-border-radius-topright: 40px;
-moz-border-radius-bottomleft: 40px;
border-radius: 3px;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;

}
#menu ul li:hover {position: relative;

}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
background: rgb(197,222,234); /* Old browsers */
background: -moz-linear-gradient(top, rgba(197,222,234,1) 0%, rgba(138,187,215,1) 31%, rgba(6,109,171,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(197,222,234,1)), color-stop(31%,rgba(138,187,215,1)), color-stop(100%,rgba(6,109,171,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;

}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;

}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
background: rgb(197,222,234); /* Old browsers */
background: -moz-linear-gradient(top, rgba(197,222,234,1) 0%, rgba(138,187,215,1) 31%, rgba(6,109,171,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(197,222,234,1)), color-stop(31%,rgba(138,187,215,1)), color-stop(100%,rgba(6,109,171,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */

}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

y el codigo de la capa que les dije
Cita:
#scrap {
margin: 10px;
border: solid 1px #000;
border-radius: 1px 25px;
-moz-border-radius: 1px 25px;
-webkit-border-radius: 1px 25px;
-o-border-radius: 1px 25px;
box-shadow: 3px 3px 10px black;
-moz-box-shadow: 3px 3px 10px black;
-webkit-box-shadow: 3px 3px 10px black;
-o-box-shadow: 3px 3px 10px black;
padding: 10px 10px 10px 100px;
opacity: 0.5;
font-size:9px;
transition: opacity .3s ease-out, box-shadow: .3s ease-out;
-moz-transition: opacity .3s ease-out, -moz-box-shadow: .3s ease-out;
-webkit-transition: opacity .3s ease-out, -webkit-box-shadow: .3s ease-out;
-o-transition: opacity .3s ease-out, -o-box-shadow: .3s ease-out;
-webkit-border-radius: 50px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius: 50px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
border-radius: 50px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
}

#scrap:hover{
opacity: 1;
font-size:14px;
transition: opacity .3s ease-in, box-shadow: .3s ease-in;
-o-transition: opacity .3s ease-in, -o-box-shadow: .3s ease-in;
-moz-transition: opacity .3s ease-in, -moz-box-shadow: .3s ease-in;
-webkit-transition: opacity .3s ease-in, -webkit-box-shadow: .3s ease-in;
-webkit-border-radius: 50px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius: 50px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
border-radius: 50px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
position:relative;
}

Etiquetas: menu+deplegable, opacidad, transicion, capas
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 01:25.