JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
        <ul>
          <li><a href="biographie.html">Biographie</a></li>
          <li><a href="espace-dsfs.html">Espace dsfds</a>
      
          </li>
            <li><a href="espace-dsf.html">Espace fds</a>

          </li>
                    <li><a href="conferences-dsfs-nutrition.html">Conférences</a>
       
          </li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>

<p>Non, l’<a href="entraînement">entraînement dfds</a> ne vous<p>

CSS

body {
  background-color: #efefef;
  font-family: 'Open Sans';
  font-size: 16px;
  font-weight: 300;
  line-height: 1.48;
  color: #1a1a1a;
  min-width: 767px;

}
a:link {
	border-bottom: none;
	color: #2d7ddf;
	text-decoration: none;
}
a:hover {
	border-bottom: 1px dotted #2d7ddf;
	background: none;
}
a:visited {
	background: none;
}
a:active {
	background: none;
}


nav {
	float: right;
	margin: 20px auto;
	width: 100%;
}
nav ul {
	margin-right: -4px;
	margin-left: 5px;
	text-align: right;
	}
nav ul li {
	display: inline-block;
	margin-right: -4px;
	margin-left: 5px;
	vertical-align: top;
}
nav a {
	padding: 4px 8px;
	text-decoration: none;
	color: rgba(255,255,255,1);
	background: rgba(0,0,0,0.25);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 14px;
	font-weight: 400;
	
}
nav a:hover {
	background: rgba(0,0,0,0.35)
}
.activeNav {
	background: rgba(0,0,0,0.35)
}
nav ul li ul {
	position: absolute;
	display: block;
	margin-top: 5px;

	background: none;
	padding-top: 5px
}
nav ul li ul li {
	display: block;
	float: none;
	margin: 0;
	padding: 0
}
nav ul li ul li a {
	display: block;
	text-align: left;
	color: rgba(255,255,255,0.9);
	text-shadow: 0 1px rgba(0,0,0,0.33);
	padding: 10px
}
nav ul li ul li a:hover {
	background: rgba(20,150,220,0.5);
	color: white;
	text-shadow: 0 1px rgba(0,0,0,0.5)
}
.hover a {
	display: block;
}
.hover span {
	color: rgba(255,255,255,0.9);
	background: rgba(20,150,220,0.5);
	border-radius: 5px;
	position: absolute;
	display: block;
	margin: 5px 0 0 -57px;
	padding: 10px;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
	cursor: default;
}