私が直面している問題は、jquery を使用した循環メニューを開いた後、画面にすべての選択肢が表示されないことです。2 つのメニューがあり、最初のメニューがラップの上に表示され、もう 1 つのメニューが表示されます最初のメニューの下。私がやろうとしているのは、最初のメニューにマウスを合わせると、すべての選択肢を表示したいのですが、ラップ要素が伸びてすべての選択肢を包み込みます。上に移動できるようにスクロールバーが表示される必要があります選択肢を参照してください。これがコードです。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で動作しているサイト を表示し、問題を直接見ることができます。