JSFiddle - React, Tailwind, and code Playground

by gyoce

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;
    justify-content: space-evenly;
}
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;
    display: block;
    float: left; /*Elément floatant à gauche*/ 
    padding: 1rem;
    position: relative; /*?*/ 
    transition-duration: 0.5s; /*En combien de temps elles apparaissent*/
    width: 100%;
    text-align: center;
}
header nav ul li a, header nav ul li ul li a{
    color: #fff; /*Couleur des a en blanc*/
    text-decoration: none;
}
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;
    visibility: hidden; /*Caché les sous menus*/
    opacity: 0;
    position: absolute; /*Pour que les gds menus s'affichent normalement*/
    left: 0;
    display: none;
}
header nav ul li:hover > ul, 
header nav ul li:focus-within > ul,
header nav ul li ul:hover{
    visibility: visible;
    opacity: 1;
    display: block;
}
header nav ul li ul li{
    clear: both; /*Comportement d'un élément qui se situe à coté d'élément flottant*/
    width: 85%;
}
/*##########Fin Menu##########*/





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