How to align submenus right under the main menu in css grid - css

Question

I am trying to position the sub menus right under the main menu in CSS Grid while hovering over the multiple main menu comps.
I could not figure out how to position the sub menu within the CSS grid.
I adapted the HTML and CSS code from here : https://css-tricks.com/solved-with-css-dropdown-menus/
Working:
When I hover over the main menu the sub menu appears
Not Working:
All of the sub menus from multiple main menu components appear on the same position and I can't figure out how to position them right under the main menu comp.
HTML
<ul>
<li class="home menu">Home
<ul class="home-dropdown">
<li>Vocalcoaching</li>
<li>Circlesinging</li>
</ul>
</li>
<li class="uber menu">Über mich</li>
<li class="vocal menu">Vocalcoaching
<ul class="vocal-drop">
<li>Gesangunterricht</li>
<li>Songwriting</li>
<li>Technische Geräte</li>
</ul>
</li>
<li class="circle menu">Circlesinging
<ul class="circle-drop">
<li>Was ist Was</li>
<li>Volume 1</li>
<li>Volume 2</li>
<li>Volume 3</li>
</ul>
</li>
CSS
ul {
display:grid;
grid-template-columns: repeat(7, minmax(10%, 1fr));
justify-items: center;
margin: 5% 10%;
text-align: left;
}
ul li {
padding: 2% 0;
}
li {
list-style-type: none;
display: block;
transition-duration: 1.5s;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.15s ease;
margin-top: 1rem;
left: 0;
display: none;
padding:0;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
background-color:beige;
}
ul li:hover > ul,
.home-dropdown li .home-dropdown:hover {
margin-right: 60%;
}
ul li ul li {
clear: both;
width: 100%;
margin-top:2%;
}
I can't align the sub menu position right under the specific menu menu using CSS GRID

Answer 1

You simply need to add position: relative; to your main menu li items.
Your submenus (ul li ul) are position: absolute;, so their parent li needs the position: relative; property set. Absolute positioned elements will position themselves to the nearest non-static element, so without setting the parent main menu item to relative, they are positioning themselves all to a container element.
ul {
display:grid;
grid-template-columns: repeat(7, minmax(10%, 1fr));
justify-items: center;
margin: 5% 10%;
text-align: left;
}
ul li {
padding: 2% 0;
}
li {
list-style-type: none;
display: block;
transition-duration: 1.5s;
position: relative;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.15s ease;
margin-top: 1rem;
left: 0;
display: none;
padding:0;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
background-color:beige;
}
ul li:hover > ul,
.home-dropdown li .home-dropdown:hover {
margin-right: 60%;
}
ul li ul li {
clear: both;
width: 100%;
margin-top:2%;
}
<ul>
<li class="home menu">Home
<ul class="home-dropdown">
<li>Vocalcoaching</li>
<li>Circlesinging</li>
</ul>
</li>
<li class="uber menu">Über mich</li>
<li class="vocal menu">Vocalcoaching
<ul class="vocal-drop">
<li>Gesangunterricht</li>
<li>Songwriting</li>
<li>Technische Geräte</li>
</ul>
</li>
<li class="circle menu">Circlesinging
<ul class="circle-drop">
<li>Was ist Was</li>
<li>Volume 1</li>
<li>Volume 2</li>
<li>Volume 3</li>
</ul>
</li>
</ul>

Answer 2

.outer {
display: grid;
grid-template-columns: repeat(7, minmax(10%, 1fr));
}
li {
list-style-type: none;
}
.dropdown {
display: none;
padding: 0;
}
.menu:hover>.dropdown,
.dropdown:hover {
display: block;
}
<ul class="outer">
<li class="home menu">Home
<ul class="dropdown home-dropdown">
<li>Vocalcoaching</li>
<li>Circlesinging</li>
</ul>
</li>
<li class="uber menu">Über mich</li>
<li class="vocal menu">Vocalcoaching
<ul class="dropdown vocal-drop">
<li>Gesangunterricht</li>
<li>Songwriting</li>
<li>Technische Geräte</li>
</ul>
</li>
<li class="circle menu">Circlesinging
<ul class="dropdown circle-drop">
<li>Was ist Was</li>
<li>Volume 1</li>
<li>Volume 2</li>
<li>Volume 3</li>
</ul>
</li>