uniwebsidad

Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

Problema superposición dos elementos

27 de marzo de 2015

Hola a todos, veréis tengo un pequeño problemilla en mi web, que es http://www.dostiroslibres.com

Si os fijáis en el menú navegación veis que en el apartado NBA, NCAA y Especiales hay un menú desplegable correspondiente que se superpone al slider cuando lo despliegas. Hasta ahí perfecto. Si dejáis la página abierta y esperáis 30 segundos ~ 1 minuto, el desplegable pasa a estar debajo del slider, siendo tapado por la imagen del slider, y no se porqué.

Ahí está el problema. Cuál es el motivo de que al abrir la web el menú funcione bien y no se superponga y al cabo de X segundos pase a estar por debajo. No consigo corregirlo.

El CSS del menú es este:

.menubar2
{
  list-style:none;
  zoom:1;
  float:left;
  margin:0;
}
 
.menubar2:before,.menubar2:after
{
  content:" ";
  display:table;
}
 
.menubar2:after
{
  clear:both;
}
 
.menubar2 ul
{
  list-style:none;
  width:12em;
  margin:0;
}
 
.menubar2 a
{
  display:block;
  padding:0 15px;
}
 
.menubar2 li
{
  position:relative;
  border:1px solid #c6573d;
  border-width:0 0 0 1px;
  margin:0;
  padding:0 1px 0 0;
}
 
.menubar2 > li
{
  float:left;
}
 
.menubar2 > li > a
{
  display:block;
  height:50px;
  line-height:50px;
  font-size:16px;
  text-decoration:none;
  font-family:Oswald, 'Droid Sans', sans-serif;
  color:#fff;
  text-shadow:0 1px 1px #000;
  border-left:1px solid #c6573d;
  padding:0 14px;
}
 
.menubar2 > li > a.active
{
  background:#253648;
  color:#fff;
  border-left:none;
  margin-left:-1px;
}
 
.menubar2 > li:hover > a
{
  background:#253648;
  color:#fff;
}
 
.menubar2 li ul
{
  background:#253648;
  display:block;
  position:absolute;
  left:0;
  z-index:999999999999999;
  visibility:hidden;
  opacity:0;
  -webkit-transition:all .25s ease-out;
  -moz-transition:all .25s ease-out;
  -ms-transition:all .25s ease-out;
  -o-transition:all .25s ease-out;
  transition:all .25s ease-out;
}
 
.menubar2 li li ul
{
  left:100%;
  top:-1px;
}
 
.menubar2 li li a
{
  display:block;
  position:relative;
  z-index:100;
  line-height:32px;
  border-bottom:1px solid #222;
  font-size:16px;
  text-decoration:none;
  color:#ddd;
  font-family:Oswald, 'Droid Sans', sans-serif;
  padding:2px 4px 2px 12px;
}
 
.menubar2 li li a:hover
{
  color:#fff;
}
 
.menubar2 li li li a
{
  color:#e0dfdf;
  font-family:'Droid Sans', sans-serif;
  text-shadow:0 1px 1px #4B4B4B;
  z-index:20;
}
 
i.fa.fa-home
{
  font-size:25px;
  padding:12px 5px;
}
 
.menubar2 > li.hover > ul,.menubar2 li li.hover ul
{
  visibility:visible;
  opacity:10;
}

Si necesitais algo más decídmelo, pero no tengo ni idea a que puede deberse. El javascript es este:

<!--Menu To Drop Down Started-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    selectnav('menu-main', {
        label: 'Select Here ',
        nested: true,
        autoselect: false,
        indent: '-'
    });
});
//]]></script>
 
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
 
function related_results_labels_thumbs(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
        var entry = json.feed.entry[i];
        relatedTitles[relatedTitlesNum] = entry.title.$t;
        try {
            thumburl[relatedTitlesNum] = entry.gform_foot.url
        } catch (error) {
            s = entry.content.$t;
            a = s.indexOf("<img");
            b = s.indexOf("src=\"", a);
            c = s.indexOf("\"", b + 5);
            d = s.substr(b + 5, c - b - 5);
            if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
                thumburl[relatedTitlesNum] = d
            } else thumburl[relatedTitlesNum] = 'http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png'
        }
        if (relatedTitles[relatedTitlesNum].length > 35) relatedTitles[relatedTitlesNum] = relatedTitles[relatedTitlesNum].substring(0, 35) + "...";
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
                relatedUrls[relatedTitlesNum] = entry.link[k].href;
                relatedTitlesNum++
            }
        }
    }
}
 
function removeRelatedDuplicates_thumbs() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    var tmp3 = new Array(0);
    for (var i = 0; i < relatedUrls.length; i++) {
        if (!contains_thumbs(tmp, relatedUrls[i])) {
            tmp.length += 1;
            tmp[tmp.length - 1] = relatedUrls[i];
            tmp2.length += 1;
            tmp3.length += 1;
            tmp2[tmp2.length - 1] = relatedTitles[i];
            tmp3[tmp3.length - 1] = thumburl[i]
        }
    }
    relatedTitles = tmp2;
    relatedUrls = tmp;
    thumburl = tmp3
}
 
function contains_thumbs(a, e) {
    for (var j = 0; j < a.length; j++)
        if (a[j] == e) return true;
    return false
}
 
function printRelatedLabels_thumbs() {
    for (var i = 0; i < relatedUrls.length; i++) {
        if ((relatedUrls[i] == currentposturl) || (!(relatedTitles[i]))) {
            relatedUrls.splice(i, 1);
            relatedTitles.splice(i, 1);
            thumburl.splice(i, 1);
            i--
        }
    }
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    if (relatedTitles.length > 0) document.write('<h1>' + relatedpoststitle + '</h1>');
    document.write('<div style="clear: both;"/>');
    while (i < relatedTitles.length && i < 20 && i < maxresults) {
        document.write('<a style="text-decoration:none;margin:0 7px 0px 0;float:left;');
        if (i != 0) document.write('"');
        else document.write('"');
        document.write(' href="' + relatedUrls[r] + '"><img class="related_img" src="' + thumburl[r] + '"/><br/><div style="width:160px;padding:9px 14px 20px;color:#fff;height:25px;text-align:left;margin:-59px 0px 0px 0px; font: normal 14px Oswald; line-height:20px;background: rgba(35, 35, 35, 0.9);opacity: 0.9;filter: alpha(opacity = 90);">' + relatedTitles[r] + '</div></a>');
        if (r < relatedTitles.length - 1) {
            r++
        } else {
            r = 0
        }
        i++
    }
    document.write('</div>');
    relatedUrls.splice(0, relatedUrls.length);
    thumburl.splice(0, thumburl.length);
    relatedTitles.splice(0, relatedTitles.length)
}
//]]>
</script>

Muchas gracias por todo.

css javascript

Respuestas

#1

Nada no hay manera, no encuentro lo que puede ser por ningún lado.

@dostiroslibres

28 marzo 2015, 14:09
#2

Solucionado, era un problema de la propiedad z-index.

@dostiroslibres

28 marzo 2015, 22:28