Child level <ul> height issue - html

Question

I know it'll be sillest Question ever!!, but having a Query regarding the height of sub level <ul>, i am not getting the full height of child tag.
<div class="nav megaMenu">
<ul>
<li>Home</li>
<li>About Us
<ul class="sub-nav" >
<li class="sub-nav-col" >About us A
<ul class="sub-inner">
<li>About us A 1</li>
<li>About us A 2</li>
<li>About us A 3</li>
</ul>
</li>
</ul>
</li>
<li>Clients
<ul>
<li>Links A
<ul>
<li>Links C 1</li>
</ul>
</li>
<li>Links B
<ul>
<li>Links B 1</li>
<li>Links B 2</li>
</ul>
</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>level-2</li>
<li>level-2</li>
<li>level-2</li>
</ul>
</li>
</ul>
</div>
CSS:
.nav {
float: left;
width: 100%;
}
.nav ul{
display:table;
margin: 0 auto;
max-width: 1024px;
width: 100%;
}
.nav > ul > li.level1{
position:static;
}
.nav ul li {
display: table-cell;
transition: all 0.5s ease 0s;
position: relative;
}
.nav li a {
transition: all 0.5s ease 0s;
display:block;
}
.nav > ul > li > a {
background: #f5f5f5;
border-right: 1px solid #000;
box-sizing: border-box;
display: block;
padding: 10px;
}
.nav > ul > li:last-child > a {
border-right: none;
}
.nav {
position: relative;
}
.nav.megaMenu > ul > li > ul{
left: 0;
position: absolute;
right: 0;
width: 100%;
z-index:9;
height:100%;
background:red;
}
.nav.megaMenu > ul {
position: relative;
margin: 0 auto;
max-width: 1024px;
}
.nav.megaMenu li.level2 ul li {
width:100%;
}
.nav.megaMenu > ul li:hover ul {
visibility:visible;
}
.nav > ul > li ul {
visibility:hidden;
z-index: 9;
position: absolute;
}
.nav > ul > li.level1 ul li a {
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid #000;
box-sizing: border-box;
color: #fff;
display: block;
margin-right: 1px;
padding: 10px;
}
you can get the working demo # here. at here when you hover on menu, you will find the red background coloured <ul> which contains sub children too, but the height of <ul> is not covering the height of full heirarchy. please help me for this!

Answer 1

Remove the absolute parent on child ul since the parent is already in absolute position.
.nav > ul > li ul {
visibility:hidden;
z-index: 9;
}
Demo: fiddle