JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<div class="main-item">
    <a href="#text1">Читайте больше...</a>
    <div class="sub-menu" id="text1">Текст<a href="#">x</a></div>
</div>
<div class="main-item">
    <a href="#text2">Читайте больше...</a> 
    <div class="sub-menu" id="text2">Текст<a href="#">x</a></div>
</div>

<div class="main-item">
    <a href="#text3">Читайте больше...</a> 
    <div class="sub-menu" id="text3">Текст<a href="#">x</a></div>
</div>
<div class="main-item">
    <a href="#text4">Читайте больше...</a> 
    <div class="sub-menu" id="text4">Текст<a href="#">x</a></div>
</div>
<div class="main-item">
    <a href="#text5">Читайте больше...</a> 
    <div class="sub-menu" id="text5">Текст<a href="#">x</a></div>
</div>

CSS

.sub-menu {
   display: none;
}
.main-item .sub-menu:target  {
    display: block;
    position: relative;
    width: 100px;
}

.main-item .sub-menu a {
    position: absolute;
    top: -10;
    font-size: 10px;
    left: 100%;
    margin-left: -16px;
}