jquery菜单没有出现在包装前面，背面颜色包含带背景图像的div

Question

我面临的问题是，使用jquery的循环菜单，打开后我看不到scree中的所有选项，我有两个菜单，第一个出现在包装的顶部，另一个出现在第一个菜单下面。我正在尝试做的是，当我将鼠标移动到第一个菜单时，我想查看所有选项，并且wrap元素会延伸以使所有选项工作，我需要一个滚动条来显示所以我可以向上移动看看选择。这是代码。 default.css

.socials {
display:block;
width:32px;
height:32px;
background:url(../img/socials/share.png) no-repeat;
cursor:pointer;
position:relative;
}

.nature {
display:block;
width:150px;
height:150px;
background:url(../img/nature/img1.png) no-repeat;
cursor:pointer;
position:relative;


}



.socials, .nature {
margin:0 auto;
}

.socials {
margin-bottom:50px;
}

ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;

}

ul.reset li {
position:absolute;
}

ul.reset li a {
outline:none;
}

#content {
margin:100px auto 0;
width:560px;
}


a {
color:#fff;
}

a img {
border:none;
}

style.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border: 0 none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}
body {
background-color: #000000;

}
 #wrap {
background-color:#FECC80;
margin:25px auto;
width: 940px;
min-height:560px;


 }
.centered {
 margin:25px auto;
width: 940px;
min-height:560px;
background:url("../Images/logo.png") no-repeat center center;

 position:fixed;
 }

/*menu em cima*/
nav {width: 100%;
position:fixed;
list-style: none;
padding: 0;
margin: 0;
top:0;

 }


    nav ul {
        list-style: none;
        margin:0;
        padding:0;
        display: table;

        width: 100%;
    }
    nav li {
        z-index:10;
        text-align: center;
        display: table-cell;
               width: 120px
    }
    nav a {
             opacity: 0.5;
   filter: alpha(opacity=50);
        color: #fff;
        text-decoration: none;
        padding: 5px 10px ;
        height: 30px;
        line-height: 20px;
        display: block;
        text-align: center;
        background: #D98134;
        border-right:1px solid white;

    }

    nav  a:hover {
          opacity:1;
 filter: alpha(opacity=100);
background-color: #D98134;
}



 /*menu de baixo*/


 nav2 {width: 100%;
position:fixed;
list-style: none;
padding: 0;
margin: 0;
bottom:0;

}


    nav2 ul {
        list-style: none;
        margin:0;
        padding:0;
        display: table;

        width: 100%;
    }
    nav2 li {
        z-index:10;
        text-align: center;
        display: table-cell;
               width: 120px
    }
    nav2 a {
             opacity: 0.5;
  filter: alpha(opacity=50);
        color: #fff;
        text-decoration: none;
        padding: 5px 10px ;
        height: 30px;
        line-height: 20px;
        display: block;
        text-align: center;
        background: #D98134;
        border-right:1px solid white;

    }

    nav2  a:hover {
          opacity:1;
 filter: alpha(opacity=100);
background-color: #D98134;
}

这里是produtos.php的部分，我有问题

<div class="centered">
</div>

<div class="nature" >
        <ul class="reset" >
            <li><a href="#"><img src="../img/nature/img2.png" alt="" /></a></li>
            <li><a href="#"><img src="../img/nature/img3.png" alt="" /></a></li>

        </ul>           
    </div>




    <div class="nature"  >
        <ul class="reset">
            <li><a href="#"><img src="../img/nature/img2.png" alt="" /></a></li>
            <li><a href="#"><img src="../img/nature/img3.png" alt="" /></a></li>
            <li><a href="#"><img src="../img/nature/img4.png" alt="" /></a></li>
            <li><a href="#"><img src="../img/nature/img2.png" alt="" /></a></li>
            <li><a href="#"><img src="../img/nature/img3.png" alt="" /></a></li>
            <li><a href="#"><img src="../img/nature/img4.png" alt="" /></a></li>
            <li><a href="#"><img src="../img/nature/img2.png" alt="" /></a></li>
            <li><a href="#"><img src="../img/nature/img3.png" alt="" /></a></li>
            <li><a href="#"><img src="../img/nature/img4.png" alt="" /></a></li>
            <li><a href="#"><img src="../img/nature/img2.png" alt="" /></a></li>
            <li><a href="#"><img src="../img/nature/img3.png" alt="" /></a></li>
            <li><a href="#"><img src="../img/nature/img4.png" alt="" /></a></li>

        </ul>           
    </div>
</div>

</div>

您可以在http://ocafe.pt/Teste/produtos.php中查看工作地点并查看问题的第一手资料。

Answer 1

我一直在玩一些想法：

对于初学者来说，.centered div上的固定属性会让你大吃一惊。

这是一个可能的解决方案：http://jsfiddle.net/webwarrior/LSn6F/34/

更改了一些css，并添加了一些元素：

<div id="wrap2"></div>

 <div id="wrap">

<div class="centered">
</div>

<div class="nature">
            <ul class="reset" style="display: block; z-index: 50; opacity: 0; ">
                <li style="top: 0px; left: 0px; z-index: 50; "><a href="#"><img src="http://ocafe.pt/img/nature/img2.png" alt=""></a></li>
                <li style="top: 0px; left: 0px; z-index: 49; "><a href="#"><img src="http://ocafe.pt/img/nature/img3.png" alt=""></a></li>

            </ul>            
        <a class="trigger" style="display: block; position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%; "></a></div>




        <div class="nature">
            <ul class="reset" style="display: block; z-index: 50; opacity: 0; ">
                <li style="top: 0px; left: 0px; z-index: 49; "><a href="#"><img src="http://ocafe.pt/img/nature/img2.png" alt=""></a></li>
                <li style="top: 0px; left: 0px; z-index: 49; "><a href="#"><img src="http://ocafe.pt/img/nature/img3.png" alt=""></a></li>
                <li style="top: 0px; left: 0px; z-index: 49; "><a href="#"><img src="http://ocafe.pt/img/nature/img4.png" alt=""></a></li>
                <li style="top: 0px; left: 0px; z-index: 49; "><a href="#"><img src="http://ocafe.pt/img/nature/img2.png" alt=""></a></li>
                <li style="top: 0px; left: 0px; z-index: 49; "><a href="#"><img src="http://ocafe.pt/img/nature/img3.png" alt=""></a></li>
                <li style="top: 0px; left: 0px; z-index: 49; "><a href="#"><img src="http://ocafe.pt/img/nature/img4.png" alt=""></a></li>
                <li style="top: 0px; left: 0px; z-index: 49; "><a href="#"><img src="http://ocafe.pt/img/nature/img2.png" alt=""></a></li>
                <li style="top: 0px; left: 0px; z-index: 49; "><a href="#"><img src="http://ocafe.pt/img/nature/img3.png" alt=""></a></li>
                <li style="top: 0px; left: 0px; z-index: 49; "><a href="#"><img src="http://ocafe.pt/img/nature/img4.png" alt=""></a></li>
                <li style="top: 0px; left: 0px; z-index: 49; "><a href="#"><img src="http://ocafe.pt/img/nature/img2.png" alt=""></a></li>
                <li style="top: 0px; left: 0px; z-index: 50; "><a href="#"><img src="http://ocafe.pt/img/nature/img3.png" alt=""></a></li>
                <li style="top: 0px; left: 0px; z-index: 49; "><a href="#"><img src="http://ocafe.pt/img/nature/img4.png" alt=""></a></li>

            </ul>            
        <a class="trigger" style="display: block; position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%; "></a></div>
</div>

CSS：

#wrap2 {
    background-color:#FECC80;
    margin:25px auto;
    width: 940px;
    min-height:560px;
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -25%;
}
#wrap {
    background-color:#FECC80;
    margin:25px auto;
    width: 940px;
    min-height:560px;
    position: absolute;
    top: 200px;
    left: 50%;
    margin-left: -25%;
    overflow: visible;
}
.centered {
    margin:25px auto;
    width: 940px;
    min-height:560px;
    background:url("http://ocafe.pt/Images/logo.png") no-repeat center center;
    overflow: auto;
    position: absolute;
    position: absolute;
    top: -25%;
    left: 0%;

}

心连心

经过一番摆弄之后我们会到达那里......