JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Révisions IUT Informatique</title>
        <link rel="stylesheet" href="main.css">
    </head>
<body>
    <header>
        <h1>Menu</h1>
        <nav>
            <ul class="menu">
                <li class="Systeme"><a href="">Système</a>
                    <ul class="submenu">
                        <li><a href="">S11 début</a></li>
                        <li><a href="">S11 plus de difficultés</a></li>
                        <li><a href="">S11 expression régulières</a></li>
                    </ul>
                </li>
                <li class="Maths"><a href="mainMaths.html">Mathématiques</a>
                    <ul class="submenu">
                        <li><a href="">M11 Chapitre 1</a></li>
                        <li><a href="">M11 Chapitre 2</a></li>
                        <li><a href="">M12 Chapitre 1</a></li>
                    </ul>
                </li>
                <li class="Eco"><a href="">Economie</a>
                    <ul class="submenu">
                        <li><a href="">E11 Chapitre 1</a></li>
                        <li><a href="">E11 Chapitre 2</a></li>
                        <li><a href="">E12 Chapitre 1</a></li>
                    </ul>
                </li>
                <li><a href="">Programmation</a></li>
                <li><a href="">Base de données</a></li>
                <li><a href="">Communication</a></li>
                <li><a href="">Web</a></li>
            </ul>           
        </nav>
        
    </header>
    <main>
        <h2>Présentation</h2>
    </main>
    <footer>

    </footer>
</body>
</html>

CSS

html{
    font-size: 18px;
    font-family: Roboto, sans-serif; 
}
body{
    margin: 0;
    padding: 0;
}
/*##########Pour le menu##########*/
header nav ul{
    display: flex;
}
header nav ul, header nav ul li ul{
    background-color: #12A2E5;
    list-style-type: none; /*Enlever les points devants les li*/
    margin: 0; 
    padding-left: 0;
}
header nav ul li, header nav ul li ul li{
    background-color:  #12A2E5;
    position: relative; /*?*/ 
    transition-duration: 0.5s; /*En combien de temps elles apparaissent*/
    text-align: center;
    flex: 1 /* L'espace dans le conteneur parent ul est réparti également avec ses enfants li */
}
header nav ul li a, header nav ul li ul li a{
    color: #fff; /*Couleur des a en blanc*/
    display: block;
    text-decoration: none;
    padding: 1rem;
}
header nav ul li:hover, header nav ul li ul li:hover{
    background-color: darkblue;
    cursor: pointer; /*Changer le curseur*/
}
header nav ul li ul{
    background-color: #12A2E5;
}

/*##########Fin Menu##########*/

.menu > li:hover .submenu {
  display: block;
}

.menu > li{
  position: relative;
}

.submenu{
    display: none;
    position: absolute; /*Pour que les gds menus s'affichent normalement*/
    left: 0;
    right: 0;
}

.debut_chap{
    font-size: 20px;
    margin: 0 1.5rem;
}
.equations, .syst_lin_def, .resol_equation{
    text-align: center;
}
.operation_syst{
    margin-left: 2rem;
}