Dropdown Annotation

dropdown_annotation.html

<style type="text/css">.navbar {
    margin: 5px;
  }
  
  ul {
    position: relative;
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 270px;
  }
  
  li {
    background-color: #61c661;
    border-radius: 2px;
    box-shadow: 0 1.5px rgba(0,0,0,0.15);
  }
  li:hover {
    background-color: #3da93d;
    border-color: #369636;
    -moz-transition: all .15s ease-in;
    -o-transition: all .15s ease-in;
    -webkit-transition: all .15s ease-in;
    transition: all .15s ease-in;
    cursor: pointer;
  }
  
  li a, li label {
    display: block;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
  }
  li a:hover {
    background-color: #a1dda1;
    -moz-transition: all .15s ease-in;
    -o-transition: all .15s ease-in;
    -webkit-transition: all .15s ease-in;
    transition: all .15s ease-in;
  }
  
  .dropdown-arrow {
    display: inline;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    right: 0;
    cursor: pointer;
    background-image: url("https://cdn.vidyard.com/hubs/logos/24dcf01c-b572-470d-83ed-c80db58de995.png");
    background-position: 19px 7px;
    background-repeat: no-repeat;
  }
  
  .group {
    max-height: 0;
    overflow: hidden;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
  }
  .group-title:checked + label + ul {
    max-height: 150px;
  }
  .group-title:checked + label {
    background-image: url("https://cdn.vidyard.com/hubs/logos/be497a24-570d-46bc-8768-68dbd4e14444.png");
  }
  
  .group li {
    background-color: #8fd68f;
    border: 0;
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 -1px #66ba5e;
  }</style><nav class="navbar" role="navigation"><ul><li><label for="group_title">Explore the Platform</label> <input id="group_title" class="group-title" type="checkbox" hidden="" /><ul class="group"><li><a target="_blank" href="https://www.vidyard.com/integrations/">Smart Integrations</a></li><li><a target="_blank" href="https://www.vidyard.com/platform/personalized-video/">Personalized Videos</a></li><li><a target="_blank" href="https://www.vidyard.com/platform/engage/">Vidyard Engage</a></li></ul></li></ul></nav>