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

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"><a href="#home.html">Home</a>
       <ul class="home-dropdown">
           <li><a href="#vocalcoaching">Vocalcoaching</a></li>
           <li><a href="#circlesinging">Circlesinging</a></li>
       </ul>
    </li>

   <li class="uber menu"><a href="#uber.ich.html">Über mich</a></li> 
   <li class="vocal menu"><a href="#">Vocalcoaching</a>
       <ul class="vocal-drop">
           <li><a href="#vocalcoaching">Gesangunterricht</a></li>
           <li><a href="#songwriting">Songwriting</a></li> 
           <li><a href="#tech">Technische Geräte</a></li> 
       </ul>
   </li>

   <li class="circle menu"><a href="#">Circlesinging</a>
       <ul class="circle-drop">
           <li><a href="#what">Was ist Was</a></li>
           <li><a href="#volume1">Volume 1</a></li> 
           <li><a href="#volume2">Volume 2</a></li>
           <li><a href="#volume3">Volume 3</a></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"><a href="#home.html">Home</a>
       <ul class="home-dropdown">
           <li><a href="#vocalcoaching">Vocalcoaching</a></li>
           <li><a href="#circlesinging">Circlesinging</a></li>
       </ul>
    </li>

   <li class="uber menu"><a href="#uber.ich.html">Über mich</a></li> 
   <li class="vocal menu"><a href="#">Vocalcoaching</a>
       <ul class="vocal-drop">
           <li><a href="#vocalcoaching">Gesangunterricht</a></li>
           <li><a href="#songwriting">Songwriting</a></li> 
           <li><a href="#tech">Technische Geräte</a></li> 
       </ul>
   </li>

   <li class="circle menu"><a href="#">Circlesinging</a>
       <ul class="circle-drop">
           <li><a href="#what">Was ist Was</a></li>
           <li><a href="#volume1">Volume 1</a></li> 
           <li><a href="#volume2">Volume 2</a></li>
           <li><a href="#volume3">Volume 3</a></li>
       </ul>
   </li>
</ul>