我面临的问题是使用jquery的圆形菜单，打开后我看不到scree中的所有选项，我有两个菜单，第一个出现在包装的顶部，另一个出现在第一个菜单下方。我想要做的是，当我将鼠标悬停到第一个菜单时，我想查看所有选项，并且 wrap 元素会延伸到所有选项，我需要一个滚动条出现，以便我可以向上移动看到选择。这是代码。默认.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;
}
样式.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中运行的站点并直接查看问题。