How can create a dropdown without using absolute or negative value - html

Question

I have a task to create a drop-down menu and i create it with using absolute and negative value but i can change my mind i want to create a drop-down without using absolute there is any possibility to create and how can do it kindly help in this query
.mainmenu {
position: relative;
cursor: pointer;
display: inline-block;
padding: 15px;
-webkit-transition: all .5s;
}
.submenu {
position: absolute;
height: 0px;
opacity: 0;
-webkit-transition: all .5s;
}
.mainmenu:hover {
border: 1px solid #000;
-webkit-transition: all .5s;
}
.mainmenu:hover .submenu {
border: 1px solid #000;
padding: 50px;
height: auto;
top: 100%;
left: -1px;
opacity: 1;
-webkit-transition: all .5s;
}
.mainmenu:hover .hide_line {
height: 5px;
width: 100%;
position: absolute;
top: 100%;
right: 0px;
background: #fff;
z-index: 1000;
}
<div class="mainmenu">
Menu
<div class="hide_line">
</div>
<div class="submenu">
submenu
</div>
</div>

Answer 1

You can use list for this purpose
.mainmenu a{
text-decoration:none;
color:#000000;
}
.mainmenu {
position: relative;
cursor: pointer;
display: inline-block;
padding: 15px;
-webkit-transition: all .5s;
list-style:none;
}
.mainmenu > li{
padding-left:0px;
margin-left:0px;
}
.submenu {
opacity:0;
list-style:none;
}
.mainmenu:hover .submenu {
border: 1px solid #000;
height: auto;
opacity: 1;
-webkit-transition: all .5s;
}
.submenu li{
padding-left:0px;
margin-left:0px;
}
<ul class="mainmenu">
<li><a href='#'>Main Menu</a>
<ul class="submenu">
<li><a href='#'>Sub menu</a></li>
</ul>
</li>
</ul>
I hope you can do rest of the formatting