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

}

HTH

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

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

1 个答案: