не вижу проблем если так сделать
<style>
body {
background:
lightgrey;
height:1200px; }
.menu {
position: fixed;
left: 20%;
top: 20%;
width: 60%;
height:
60%;
background-color: grey;
}
.head {
left: 20%;
top:
20%;
width: 100%;
background:
maroon;
color: whitesmoke;
}
.content {
left: 20%;
top:
25%;
height: 80%;
width: 100%;
overflow: auto;
}
.x {
position: absolute;
right: 2%;
cursor: pointer;
}
</style>
<div
class="menu" id="menu">
<div
class="head">
<span>Меню</span>
<span class="x"
onclick="this.parentNode.parentNode.st
yle.display = 'none'">x</span>
</div>
<div class="content">
<a
href="#">link1</a><br>
<a
href="#">link2</a><br>
<a
href="#">link3</a><br>
<a
href="#">link4</a><br>
<a
href="#">link5</a><br>
<a
href="#">link6</a><br>
<a
href="#">link7</a><br>
<a
href="#">link8</a><br>
<a
href="#">link9</a><br>
<a
href="#">link10</a><br>
<a
href="#">link11</a><br>
<a
href="#">link12</a><br>
<a
href="#">link13</a><br>
<a
href="#">link14</a><br>
<a
href="#">link15</a><br>
<a
href="#">link16</a><br>
</div>
</div>