JSFiddle - React, Tailwind, and code Playground

by hamza Had

HTML

<nav>
            <ul class="menu">
                <li id="accueil"><a href="./index.html" class="iconeAccueil">Accueil</a></li>
                <li id="bureau"><a href="./bureau.html">Bureau</a></li>
                <li id="actualites"><a href="./actualites.html">Actualités</a></li>
                <li id="partenaires"><a href="./partenaires.html">Partenaires</a></li>
                <li id="contact"><a href="./contact.html">Contact</a></li>
                <li id="liens"><a href="./liensutiles.html">Liens utiles</a></li>
				<li id="Liens"><a href="#liens">lien+subtitles</a>
						<ul class="sousmenu">
							<li id="Liens"><a href="#liens">Liens utiles</a></li>
							<li id="Liens"><a href="#liens">Liens utiles</a></li>
							<li id="Liens"><a href="#liens">Liens utiles</a></li>
							<li id="Liens"><a href="#liens">Liens utiles</a></li>
						</ul>
				</li>
				
            </ul>
        </nav>

CSS

/* Le menu */
.menu{
	
	margin:0 auto;
	padding:0;
	list-style-type:none;
    display:table;
	position:relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
	margin-bottom: 50px;
	white-space: nowrap;
}

.menu  > li{
    /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */

    
    background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
    background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

    border-right: 1px solid rgba(9, 9, 9, 0.125);

    /* Adding a 1px inset highlight for a more polished efect: */

    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    position:relative;
	display:inline-block;
    
    list-style: none;
	
}

.menu >li +li,
.sousmenu li{
	
	width:150px;
	text-align:center;
	}
.menu li:after{


    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;

    /* Gradients! */

    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%,...