JSFiddle - React, Tailwind, and code Playground

by exercices

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Menu simple HTML et CSS</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">		
  </head>

  <body>
    <nav>
      <ul>
        <li class="menu-html"><a href="html.html">HTML</a>
          <ul class="submenu">
            <li><a href="#">Cours complet HTML et CSS</a></li>
            <li><a href="#">Référence des éléments HTML</a></li>
            <li><a href="#">Référence des attributs HTML</a></li>
            <li><a href="#">Exemples et exercices</a></li>
          </ul>
        </li>
        <li class="menu-css"><a href="css.html">CSS</a>
          <ul class="submenu">
            <li><a href="#">Cours complet HTML et CSS</a></li>
            <li><a href="#">Référence des propriétés CSS</a></li>
            <li><a href="#">Exemples et exercices</a></li>
          </ul>
        </li>
        <li class="menu-javascript"><a href="javascript.html">JavaScript</a>
          <ul class="submenu">
            <li><a href="#">Cours complet JavaScript</a></li>
            <li><a href="#">Exemples et exercices</a></li>
          </ul>
        </li>
        <li class="menu-contact"><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </body>

</html>

CSS

body {
  font-family: 'Source code pro', Calibri, serif;
  margin: 0px;
  padding: 0px;
}

nav {
  width: 100%;
  background-color: #424558;
}

nav>ul {
  margin: 0px;
  padding: 0px;
}

nav>ul::after {
  content: "";
  display: block;
  clear: both;
}

nav>ul>li {
  float: left;
  position: relative;
}

nav>ul>li>a {
  padding: 20px 30px;
  color: #FFF;
}


nav>ul>li:hover a {
  padding: 15px 30px 20px 30px;

}


nav li {
  list-style-type: none;
}

.submenu {
  display: none;
}

nav a {
  display: inline-block;
  text-decoration: none;
}

nav li:hover .submenu {
  display: inline-block;
  position: absolute;
  top: 100%;
  left: 0px;
  padding: 0px;
  z-index: 1000;
}

.submenu li {
  border-bottom: 1px solid #CCC:
}

.submenu li a {
  padding: 15px 30px;
  font-size: 13px;
  color: #222538;
  width: 270px;
}

.menu-html:hover {
  border-top: 5px solid #e44d26;
  background-color: RGBa(228, 77, 38, 0.15);
}

.menu-css:hover {
  border-top: 5px solid #0070bb;
  background-color: RGBa(000, 112, 192, 0.15);
}

.menu-javascript:hover {
  border-top: 5px solid #f1dc4f;
  background-color: RGBa(241, 211, 79, 0.15);
}

.menu-contact:hover {
  border-top: 5px solid #BBB;
  background-color: RGBa(220, 220, 220, 0.15);
}

.menu-html .submenu {
  background-color: RGB(230, 100, 40);
}

.menu-css .submenu {
  background-color: RGB(000, 160, 240);
}

.menu-javascript .submenu {
  background-color: RGB(250, 215, 100);
}

.submenu li:hover a {
  color: #EEE;
  font-weight: bold;
}

.menu-html .submenu li:hover {
  background-color: RGB(210, 77, 60);
}

.menu-css .submenu li:hover {
  background-color: RGB(000, 115, 200);
}

.menu-javascript .submenu li:hover {
  background-color: RGB(200, 165, 75);
}