Javascript Div wrap使链接以<；ul>；不可理喻

我一辈子都搞不懂这件事！我知道html有点凌乱，但它能满足我的需要。这里的问题是，一旦链接被包装到div中，我就无法单击它们。我删除了包装，链接就正常工作了，但显然页面布局混乱，水平滚动也不正常。任何帮助都将不胜感激。我肯定这是很明显的，我只是错过了，但我不能找出它

这是css

div#wrap-gallery {
    overflow:hidden;
    position:relative;
    margin:-300px 0 0 0;
    height:950px;
    background:#000;
    z-index:-999999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery {
    background:url('LINK');
    background-size:100%;
    width:3000px;
    float:left;
    height:950px;
    position:absolute;
    z-index:-999999999999999999999999999999999999999999999999999999999999;
}

ul#gallery2 {
    background:url('LINK');
    background-size:100%;
    background-repeat:no-repeat;
    opacity:0.6;
    width:3000px;
    float:left;
    height:950px;
    position:absolute;
    z-index:-99999999999999999999999999999999999999999999999999999999999999999;
}

ul#bio {
    font-family: 'Rock Salt', cursive;
    width:200px;
    margin-top:510px;
    margin-left:400px;
    font-size:40px;
    color:#fff;
    z-index:999999999999999999999999999999999999999999999999999999999999999;
}



ul#music {
    font-family: 'Rock Salt', cursive;
    width:200px;
    margin-top:-215px;
    margin-left:970px;
    font-size:40px;
    color:#fff;
    z-index:999999;
}

ul#lyrics {
    font-family: 'Rock Salt', cursive;
    width:200px;
    margin-top:10px;
    margin-left:1500px;
    font-size:40px;
    color:#fff;
    z-index:99999999999;
}

    ul#dates {
    font-family: 'Rock Salt', cursive;
    width:200px;
    margin-top:50px;
    margin-left:1100px;
    font-size:40px;
    color:#fff;
    z-index:999999999999999999;
}

    ul#gallery3 {
    font-family: 'Rock Salt', cursive;
    width:200px;
    margin-top:-425px;
    margin-left:2000px;
    font-size:40px;
    color:#fff;
    z-index:999999999999999999999999999;
}

    ul#store {
    font-family: 'Rock Salt', cursive;
    width:200px;
    margin-top:160px;
    margin-left:2375px;
    font-size:40px;
    color:#fff;
    z-index:99999999999999999999999999999999999;
}

    ul#contact {
    font-family: 'Rock Salt', cursive;
    width:200px;
    margin-top:120px;
    margin-left:2650px;
    font-size:40px;
    color:#fff;
    z-index:9999999999999999999999999999999999999999;
}


ul#gallery li{
  display:block;
}
ul#gallery li img{
  float:left;
  height:100%;
}

#lightbox {
        position:fixed; 
        top:0; 
        left:0; 
        width:100%; 
        height:100%; 
        background:url(LINK) repeat; 
        text-align:center;
    }
    #lightbox p {
        text-align:right; 
        color:#fff; 
        margin-right:20px; 
        font-size:12px; 
    }
    #lightbox img {
        box-shadow:0 0 15px #111;
        -webkit-box-shadow:0 0 15px #111;
        -moz-box-shadow:0 0 15px #111;
        max-width:940px;
    }
    #content img{
      height:90%;
      max-width:100%;
    }


    @media only screen and (min-width: 1280px) {

      div#wrap-gallery {
    overflow:hidden;
    position:relative;
    margin:-300px 0 0 0;
    height:1000px;
    background:#000;
    z-index:-999999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery {
    background:url('{image:pano}');
    background-size:100%;
    width:3000px;
    float:left;
    height:1000px;
    position:absolute;
    z-index:-999999999999999999999999999999999999999999999999999999999999;
}

ul#gallery2 {
    background:url('{image:map}');
    background-size:100%;
    background-repeat:no-repeat;
    opacity:0.6;
    width:3000px;
    float:left;
    height:1000px;
    position:absolute;
    z-index:-9999999999999999999999999999999999999999999999999999999999;
}  

    }

下面是HTML：

<div id="wrap-gallery">
    <ul id="gallery">
        <ul id="gallery2">
            <ul id="bio">
                <li><a href="LINK">Bio</a></li>
            </ul>
            <ul id="music">
                <li><a href="LINK">Music</a></li>
            </ul>
            <ul id="lyrics">
                <li><a href="LINK">Lyrics</a></li>
            </ul>
            <ul id="dates">
                <li><a href="LINK">Dates</a></li>
            </ul>
            <ul id="gallery3">
                <li><a href="LINK">Gallery</a></li>
            </ul>
            <ul id="store">
                <li><a href="LINK">Store</a></li>
            </ul>
            <ul id="contact">
                <li><a href="LINK">Contact</a></li>
            </ul>
        </ul>
    </ul>
</div>

还有一些js：

var moveWin = {
    availW: 0,
    galW: 0,
    moveDis: 0,

    init: function(){
        this.availW = $(document).width();
        this.galW = $('#gallery').width() - this.availW;

        this.moveDis = this.galW / this.availW;

        $(document).mousemove(function(e){
            moveWin.displace(e);
        });
    },

    displace: function(e){
        var x = e.pageX * moveWin.moveDis;
        $('#gallery').css({left: -x});
        $('#status').html(e.pageX);
    }
}

jQuery(document).ready(function($) {
    moveWin.init();

    $('.lightbox_trigger').click(function(e) {

        e.preventDefault();

        var image_href = $(this).attr("href");

        if ($('#lightbox').length > 0) { // #lightbox exists

            $('#content').html('<img src="' + image_href + '" />');

            //$('#lightbox').show();

            $('#lightbox').fadeIn('2000');
        }

        else { 

            var lightbox = 
            '<div id="lightbox">' +
                '<p>Click to close</p>' +
                '<div id="content">' + 
                    '<img src="' + image_href +'" />' +
                '</div>' +  
            '</div>';

            $('body').append(lightbox);
        }

    });

    $('#lightbox').live('click', function() { 
        $('#lightbox').hide();
    });

});

var moveWin={
有效期：0，
galW:0，
moveDis:0，
init:function（）{
this.availW=$（document.width（）；
this.galW=$（'#gallery'）.width（）-this.availW；
this.moveDis=this.galW/this.availW；
$（文档）.mousemove（函数（e）{
moveWin.displace（e）；
});
},
置换：函数（e）{
var x=e.pageX*moveWin.moveDis；
$（'#gallery'）.css（{左：-x}）；
$（'#status'）.html（e.pageX）；
}
}
jQuery（文档）.ready（函数（$）{
moveWin.init（）；
$（'.lightbox_触发器'）。单击（函数（e）{
e、 预防默认值（）；
var image_href=$（this.attr（“href”）；
如果（$（'#lightbox'）.length>0）{/#lightbox存在
$（'#content'）.html（''）；
//$（“#lightbox”）.show（）；
$（#lightbox'）.fadeIn（'2000'）；
}
否则{
var灯箱=
'' +
“单击关闭
”+
'' + 
'' +
'' +  
'';
$（'body'）。追加（lightbox）；
}
});
$（'#lightbox'）.live（'click'，function（）{
$（“#lightbox”）.hide（）；
});
});

---

再次感谢您提供的任何帮助

你的html无效

ul

后面不能跟着另一个

ul

这里有一个小把戏，很可能它与你的负

z-index

有关，没有理由有那些可笑的z-index。@dgig-更不用说在非定位元素上有z-index是不相关的。