マウスオーバ時に出るプルダウンリスト

めもーん。
★jQuery読み込む。
★２つあるtest__categoryLink aタグ中の文言は同じにする。（以下だと、「リンク」という文言のこと）

<div class="test" data-hoge-hoge="block"><span class="test__categoryLink"><a href="#" data-hoge-hoge="button">リンク</a></span>&nbsp;
    <div class="test__categoryBlock" data-hoge-hoge="button">
    <p class="test__categoryLink"><a href="#">リンク</a></p>
    <ul class="test__categoryBlock__list">
        <li><a href="#">リスト１</a></li>
        <li><a href="#">リスト２</a></li>
        <li><a href="#">リスト３</a></li>
    </ul>
    </div>
</div>

/* reset */
html,body,div,span,
p,img,ul,li {
  background: transparent;
  border: 0;
  font-size: 100%;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
ul li {
  list-style: none;
}
a {
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 100%;
  vertical-align: baseline;
  text-decoration: none;
  color: #fd1e69;
}
a:hover {
  color: #333;
}

.test {
  position: relative;
  margin: 40px;
}
.test .test__categoryLink a {
  padding: 0 15px 0 0;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGBAMAAADj6an2AAAALVBMVEUAAABmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmaTgChpAAAAD3RSTlMA+/Psw7Oij1VDNSgKxCHshRGqAAAAKElEQVQI12MoYGAAYjEGBjYBhsYYnsAGBk6Vt5pAwcXCC4AktzcDAwBmDQW2A333EQAAAABJRU5ErkJggg==) right 6px no-repeat;
}
.test.on .test__categoryLink a {
  padding: 0 15px 0 0;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAMAAAAmGUT3AAAAM1BMVEUAAABmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZwOlLNAAAAEXRSTlMA++8HxEM1KLSzpKOQj1VUItzUG5EAAAAxSURBVAjXJcGHEQAhDASxPdvAB1L/1cKAxFaicGSTZbZkMcMSdL2OPxrod8A/0bjqAhPEALbnEC5FAAAAAElFTkSuQmCC) right 6px no-repeat;
}
.test .test__categoryBlock__list > li {
  margin-bottom: 5px;
  text-indent: -8px;
  padding-left: 8px;
}
.test.on .test__categoryBlock__list a {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHAQMAAAAVq36TAAAABlBMVEW/v78AS7E2lsyyAAAAAXRSTlMAQObYZgAAABJJREFUGBljbmBmAEMJZgPmBAAIngE+HFgy7QAAAABJRU5ErkJggg==) 0px 4px no-repeat;
  padding: 0px 0px 0px 10px;
  float: none;
}
.test.on .test__categoryBlock {
  position: absolute;
  top: -8px;
  left: -12px;
  display: block;
  padding: 6px 10px 6px 10px;
  border: 2px solid #67a5dd;
  border-radius: 2px;
  background-color: #fff;
}
.test.on .test__categoryBlock__list {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dotted #bfbfbf;
}
.test .test__categoryBlock {
  display: none;
}

$(function() {
  $('[data-hoge-hoge="button"]').on('mouseenter mouseleave',function(){
    $('[data-hoge-hoge="block"]').toggleClass('on');
  });
});

こんな感じになる。

　　↓

動いているものはこちら
https://jsfiddle.net/Ricoliz/o3xo1mfj/3/embedded/result/