How to keep a div stayed in same position css - html

Question

Well, I have a category panel picture and I am trying to create it into HTML.
I have tried this code but I hover over a category a sub_category panel appears but every panel seems to have margin at top. I want to have every panel same position just like in picture.
I tried top: 0 but it didn't have any affect. Can anyone help?
.category_nav {
height: 40px;
margin-top: 28px;
}
.category_nav_ul {
list-style-type: none;
padding: 0;
}
.category_nav_ul>li {
display: inline-block;
}
#category_nav_ul_category {
width: 380px;
cursor: pointer;
}
#category_nav_div {
margin-top: 5px;
width: 380px;
position: absolute;
background-color: white;
padding-bottom: 10px;
}
.category {
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 1px;
margin-left: 0 !important;
border-radius: 0 !important;
border: 0 !important;
}
.category:hover {
border: 2px;
background: linear-gradient(to right, red 0px, #E5002B 3px, transparent 3px);
background-color: white;
border-top: 1px solid grey !important;
border-bottom: 1px solid grey !important;
}
.fa-chevron-right {
font-weight: 100px !important;
font-size: 10px !important;
}
.left-menu-ul {
list-style: none;
}
.left-mega-menu {
background: #fff none repeat scroll 0 0;
left: 90%;
position: absolute;
top: 0;
width: 470px;
opacity: 0;
visibility: hidden;
z-index: 2345;
transition: .3s;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 60px;
}
.left-menu ul li:hover>.left-mega-menu {
opacity: 1;
visibility: visible;
left: 100%;
}
.sub_categories {
border-radius: 0 !important;
padding-top: 6px;
padding-bottom: 6px;
border-left: 2px solid #E5002B;
border-top: 0px !important;
border-right: 0px !important;
width: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="category_nav_div" class="light-border">
<div class="left-menu collapse in" id="left-menu">
<nav>
<ul class="left-menu-ul list-group">
<li class="category list-group-item">
<i class="fa fa-camera fa-fw"></i>
<a href="/mystore/category/Camera">Camera
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Camera/sub_cat/">
<li class="list-group-item sub_categories">Camera</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-angle-right fa-fw"></i>
<a href="/mystore/category/Clothes">Clothes
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Clothes/sub_cat/">
<li class="list-group-item sub_categories">Clothes</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-mobile fa-fw"></i>
<a href="/mystore/category/Mobiles">Mobiles
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Mobiles/sub_cat/">
<li class="list-group-item sub_categories">Mobiles</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Tablet/sub_cat/">
<li class="list-group-item sub_categories">Tablet</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-angle-right fa-fw"></i>
<a href="/mystore/category/Graphics Cards">Graphics Cards
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Graphics Cards/sub_cat/">
<li class="list-group-item sub_categories">Graphics Cards</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Computer/sub_cat/">
<li class="list-group-item sub_categories">Computer</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/DVDs/sub_cat/">
<li class="list-group-item sub_categories">DVDs</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Laptop/sub_cat/">
<li class="list-group-item sub_categories">Laptop</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-television fa-fw"></i>
<a href="/mystore/category/Television">Television
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Television/sub_cat/">
<li class="list-group-item sub_categories">Television</li>
</a>
</div>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>

Answer 1

Remove position relative from category li and apply it to its parent
.left-menu-ul {
list-style: none;
position: relative;
}
fiddle