JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="nav-wrap">
<span class="ttl">Sommaire</span>
<ul class="nav">
    <li>
        <a href="#">
        <span class="item">Article 1</span>
        <span class="detail">Le crowdfunding, lien le plus direct entre art et public</span>
        </a>
    </li>
    <li>
        <a href="#">
        <span class="item">Article 2</span>
        <span class="detail">Ulule : le crowdfunding idéaliste ?</span>
        </a>
    </li>
    <li>
        <a href="#">
        <span class="item">Article 3</span>
        <span class="detail">Crowdfunding : les projets insolites</span>
        </a>
    </li>
    
</ul>
</div>

CSS

.nav-wrap {background:beige; padding:5px; margin:10px;font-size:16px; font-family:Arial; line-height:1.3; position:relative;}
.ttl {float:left; padding:0 5px;}
.nav {}
.nav li {float:left; border:1px solid black;}
.nav li:hover {background:firebrick;}
.nav li:hover .detail {display:block;}
.item {display:block; padding:0 5px;}
.detail {position:absolute; left:0; right:0; padding:5px; display:none; background:firebrick;}