The problem that I am facing, is that the circular menus using jquery, after opening I can't see all of the choices in the scree, I've got two menus, the first appears on top of the wrap, and the other appear below the first menu. What a I'm trying to do is, when I do mousehover to the first menu, I want to view all the choices, and the wrap element stretches to englobe all the choices, I need a scrollbar to appear so I can move up a see the choices. Here is the code. 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;
}
the 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;
}
And here goes the part from produtos.php where i have the problems
<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>
You can view the site working in http://ocafe.pt/Teste/produtos.php and view in first hand the problem.
