JSFiddle - React, Tailwind, and code Playground

by Ricoliz

HTML

<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>

CSS

.test {
  position: relative;
  margin-bottom: 10px;
}
.test .test__categoryBlock__list > li {
  text-indent: -8px;
  padding-left: 8px;
}
.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;
}

JavaScript

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