Php jquery菜单不出现在带有背景图像的div的back color的wrap前面_Php_Jquery_Html_Css_Jquery Plugins

Php jquery菜单不出现在带有背景图像的div的back color的wrap前面

php jquery html css jquery-plugins

Php jquery菜单不出现在带有背景图像的div的back color的wrap前面,php,jquery,html,css,jquery-plugins,Php,Jquery,Html,Css,Jquery Plugins,我面临的问题是，使用jquery的循环菜单，在打开后，我看不到屏幕中的所有选项，我有两个菜单，第一个出现在包装的顶部，另一个出现在第一个菜单的下面。我想做的是，当我将鼠标移到第一个菜单上时，我想查看所有的选项，而wrap元素会延伸到所有的选项，我需要一个滚动条来显示，这样我就可以向上移动一个位置来查看选项。这是代码。 default.css .socials { display:block; width:32px; height:32px; background:url(../img/soc

我面临的问题是，使用jquery的循环菜单，在打开后，我看不到屏幕中的所有选项，我有两个菜单，第一个出现在包装的顶部，另一个出现在第一个菜单的下面。我想做的是，当我将鼠标移到第一个菜单上时，我想查看所有的选项，而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中的部分我哪里有问题

您可以在中查看正在工作的站点

并直接观察问题。

我一直在玩弄一些想法：

首先，你在以.centered为中心的div上的固定属性会把你弄得一团糟

以下是一个可能的解决方案：

更改了一些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有关，与jQuery无关。它不起作用，我将尝试启动一个新项目，看看我是否遗漏了什么。。。。

<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>

#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%;

}