Event Delegation

by Pranab Dey

HTML

<nav>
<ul class="main">
  <li class="parent"><a href="">Home0</a>
  <ul class="inside">
    <li><a href="">Home0.1</a></li>
    <li><a href="">Home0.2</a></li>
  </ul>
  </li>
  <li><a href="">Home1</a></li>
  <li><a href="">Home2</a></li>
</ul>
</nav>

CSS

*{
  box-sizing: border-box;
}
nav {
  border: 1px solid red;
}

a {
  border: 1px solid blue;
}

ul{
  border: 1px solid green;
  padding-left: 0;
}
ul.main > li{
  display: inline-block;
  list-style-type: none;
  width: 30%;
  width: calc(100% / 3);
  float: left;
}
ul.main > li > a{
  width: 100%;
  display: block;
}
.parent{
  position: relative;
}
.inside{
  position: absolute;
  width: 100%;
  border: 1px solid red;
  list-style-type: none;
  visibility: hidden;
}
.inside > li, .inside > li > a{
  width: inherit;
  display: block;
}
.parent:hover .inside{
  visibility: visible;
  transition: visibility 0.3s ease-in;
}