html - 如何在不使用绝对值或负值的情况下创建下拉列表

Question

我有一个创建下拉菜单的任务，我使用绝对值和负值创建它，但我可以改变主意我想创建一个不使用绝对值的下拉菜单有任何可能创建以及如何创建请在这个查询中提供帮助

.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

您可以为此目的使用列表

.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>   

我希望你能完成剩下的格式化工作