Can't make CSS submenu show up below its parent - html

Question

I've a module which renders html menu markup. This markup can't be overridden.
So in order to make the menu look like it should I have to write some custom CSS code.
The problem is that on hover the submenu doesn't show up underneath its parent.
html:
<div class="moduletable_menu slider-menu">
<ul class="menu">
<li class="item-122 default current active">Products From Metal</li>
<li class="item-126 menu-deeper menu-parent">
Products<span class="menu-toggler"></span>
<ul class="menu-child">
<li class="item-123">Sliding Fence</li>
</ul>
</li>
</ul>
</div>
CSS:
.slider-menu {
display: block;
}
.slider-menu ul {
list-style: none;
padding: 0;
margin: 0 -15px;
z-index: 99;
display: block;
float: right;
position: relative;
}
.slider-menu ul li {
display: inline-block;
position: relative;
padding: 0;
}
.slider-menu ul li a {
display: inline-block;
padding: 0 15px;
line-height: 60px;
font-size: 14px;
margin: 0;
color:#fff;
}
.slider-menu .menu-deeper.menu-parent{
display: inline-block;
position: relative;
padding: 0;
list-style: none;
}
.slider-menu .menu-deeper.menu-parent li a{
display: inline-block;
padding: 0 15px;
line-height: 60px;
font-size: 14px;
margin: 0;
}
.slider-menu > ul li.menu-deeper > a::after {
font-family: "FontAwesome";
content: "\f107";
float: right;
margin-left: 7px;
}
.slider-menu .menu-child {
display: none;
}
.slider-menu .menu-child li {
display: block;
padding: 0;
position: relative;
}
.slider-menu .menu-child li > a {
font-size: 14px;
line-height: 1;
display: inline-block;
padding: 8px 0;
cursor: pointer;
}
.slider-menu .menu-deeper.menu-parent:hover > .menu-child {
animation: spFadeInUp 400ms ease-in;
display: block;
}
.slider-menu ul li a:hover {
color: red;
}
JSFiddle
So, I've missed something... Need proper corrections.

Answer 1

Adding position: absolute; top: 100%; to the child menu will position the menu absolutely directly below the parent li with position: relative;
.slider-menu .menu-child {
display: none;
position: absolute;
top: 100%;
}
body{
background-color:black;
}
.slider-menu {
display: block;
position:absolute;/*just to position it to the left corner in the JSFiddle example*/
top:0;
}
.slider-menu > ul {
float: right;
}
.slider-menu ul {
list-style: none;
padding: 0;
margin: 0 -15px;
z-index: 99;
display: block;
position: relative;
}
.slider-menu ul li {
display: inline-block;
position: relative;
padding: 0;
}
.slider-menu ul li a {
display: inline-block;
padding: 0 15px;
line-height: 60px;
font-size: 14px;
margin: 0;
color:#fff;
}
.slider-menu .menu-deeper.menu-parent{
display: inline-block;
position: relative;
padding: 0;
list-style: none;
}
.slider-menu .menu-deeper.menu-parent li a{
display: inline-block;
padding: 0 15px;
line-height: 60px;
font-size: 14px;
margin: 0;
}
.slider-menu > ul li.menu-deeper > a::after {
font-family: "FontAwesome";
content: "\f107";
float: right;
margin-left: 7px;
}
.slider-menu .menu-child {
display: none;
}
.slider-menu .menu-child li {
display: block;
padding: 0;
position: relative;
}
.slider-menu .menu-child li > a {
font-size: 14px;
line-height: 1;
display: inline-block;
padding: 8px 0;
cursor: pointer;
}
.slider-menu .menu-deeper.menu-parent:hover > .menu-child {
animation: spFadeInUp 400ms ease-in;
display: block;
position: absolute;
top: 100%;
}
.slider-menu ul li a:hover {
color: red;
}
#keyframes spFadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
<div class="moduletable_menu slider-menu">
<ul class="menu">
<li class="item-122 default current active">Products From Metal</li>
<li class="item-126 menu-deeper menu-parent">
Products<span class="menu-toggler"></span>
<ul class="menu-child">
<li class="item-123">Sliding Fence</li>
</ul>
</li>
</ul>
</div>
Update
To match the parent text horizontally you can match the padding of 15px that the parent <li> has
.slider-menu .menu-child {
display: none;
position: absolute;
top: 100%
padding: 0 15px;
}