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

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

您可以使用列表来实现此目的     

＆＃13;

＆＃13;

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

＆＃13;

<ul class="mainmenu">
    <li><a href='#'>Main Menu</a>
        <ul class="submenu">
            <li><a href='#'>Sub menu</a></li>
        </ul>
    </li>
</ul>   

＆＃13;

＆＃13;

＆＃13;

我希望你可以做其余的格式化