Menu stop in footer and scroll bar - html

Question

Hello I would like to know how to make it stop my dropdown menu in my footer?
When I click on France the list scroll but did not stop at my footer and you can not see the rest of the menu hiding behind the footer.
That is why I am trying to implement a scroll bar.
Menu CSS :
body {
font-size: 100%;
background:#32373d;
}
a {
text-decoration: none;
}
ul, ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#vertical {
width: 260px;
font-size: 0.8125em;
position: absolute;
float: right;
}
.menuv {
width: auto;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
Footer CSS :
#footer {
position:absolute;
left:0px;
bottom:0px;
height:60px;
width:100%;
background: #258dc8; /* Old browsers */
background: -moz-linear-gradient(top, #258dc8 0%, #258dc8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color- stop(0%,#258dc8), color-stop(100%,#258dc8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #258dc8 0%,#258dc8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #258dc8 0%,#258dc8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #258dc8 0%,#258dc8 100%); /* IE10+ */
background: linear-gradient(to bottom, #258dc8 0%,#258dc8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
}
Problem : https://ps3land.franceserv.com/

Answer 1

You will have to face several problems in your code. Basically you need to give your element #vertical and its ul the follwing styles:
#vertical {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
padding-top: 50px // height of header;
padding-bottom: 60px // height of footer
}
#vertical > ul {
overflow-y: scroll;
height: 100%;
}
It's not yet perfect, but this should get you started.

Answer 2

Remove the overflow: hidden from your body tag
Change height property of <div id="vertical"> to about 500px
Remove padding from ul li a
Change width of #vertical to about 240px
Add to #vertical, overflow: scroll
There will be several other issues you will have to solve using this method, but the combinations you are using to achieve your sidebar without your footer overlapping may require jQuery or JavaScript.