div when hovered gets dragged along with when page is scrolled - html

Question

I am stuck at an issue and need some one to help me.
Have created a sample fiddle to explain the functionality.
When I hover over li tag the respective div is hovered. I wanted all divs of corresponding li tag to be shown at same position so have used position as fixed.
However, the issue is when the cursor is placed on hovered div and page is scrolled the hovered divs get dragged along with when scrolled which should not happen. Can someone please help me resolve this issue?
Here is the screenshot of the issue
.lidiv {
display: none;
}
.ulclass li:hover .lidiv {
display: block
}
.ulclass {
list-style: none
}
.lidiv {
position: fixed;
left: 20%;
top: 0px;
}
<div class="divoneclass">
<ul class="ulclass">
<li class="liclass">
<a class="aclass" href="javascript:void(0)">
<span class="spanclassupp">
<span class="spantitle">DOG</span>
</span>
</a>
<div class="lidiv">
<div class="lidivone">
<div class="lidivtwo">
<div class="lidivthree">
<div class="lidivfour">
<div class="diccontent">
<p>
LI ONE VALUE
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="liclass">
<a class="aclass" href="javascript:void(0)">
<span class="spanclassupp">
<span class="spantitle">CAT</span>
</span>
</a>
<div class="lidiv">
<div class="lidivone">
<div class="lidivtwo">
<div class="lidivthree">
<div class="lidivfour">
<div class="diccontent">
<p>
LI TWO VALUE
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="liclass">
<a class="aclass" href="javascript:void(0)">
<span class="spanclassupp">
<span class="spantitle">OTHER</span>
</span>
</a>
<div class="lidiv">
<div class="lidivone">
<div class="lidivtwo">
<div class="lidivthree">
<div class="lidivfour">
<div class="diccontent">
<p>
LI THREE VALUE
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>