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


i have task create drop-down menu , create using absolute , negative value can change mind want create drop-down without using absolute there possibility create , how can kindly in query

.mainmenu {    position: relative;    cursor: pointer;    display: inline-block;    padding: 15px;    -webkit-transition: .5s;  }    .submenu {    position: absolute;    height: 0px;    opacity: 0;    -webkit-transition: .5s;  }    .mainmenu:hover {    border: 1px solid #000;    -webkit-transition: .5s;  }    .mainmenu:hover .submenu {    border: 1px solid #000;    padding: 50px;    height: auto;    top: 100%;    left: -1px;    opacity: 1;    -webkit-transition: .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>

you can use list purpose

.mainmenu a{      text-decoration:none;      color:#000000;  }  .mainmenu {      position: relative;      cursor: pointer;      display: inline-block;      padding: 15px;      -webkit-transition: .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: .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 can rest of formatting


Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -