JSFiddle - React, Tailwind, and code Playground

by vzytoi

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> </title>
        <link rel='stylesheet' type='text/css' href='accceuil.css' media='all' />
    </head>
    <body>
    <header>  
        <h1> Titre site </h1>
    </header>
        <div class="menu">
            <ul>
                <li><a href="#">Lien 1 </a> </li>
                <li><a href="#">Lien 2</a>
                    <ul> 
                        <li><a href="#">Lien 1</a></li>
                        <li><a href="#">Lien 2</a></li>
                        <li><a href="#"> Lien 3</a></li>
                    </ul>
                </li>
                <li><a href="">Lien 3</a></li>
            </ul>
        </div>
    </body>
</html>

CSS

h1{
    font-family: 'Cambria';
    font-size: 50px;
    margin, padding: 0 auto;  
    color: #c68b7e; 
    text-align: center; 
}


.menu ul{
    list-style: none;
    margin: none; 
    padding: 0px;
    font-family: 'Georgia'; 
    font-size: 16px; 
    text-align:center; 
    background: gray;

}

a {
    text-decoration: none;
    color: red;
}

.menu ul li{
    width: 200px; 
    height: 35px; 
    margin: 0px;
    padding: 0px; 
    line-height: 40px; 
    text-decoration:none; 
    color: #fff; 
    padding-bottom: 5px;
    border: 1px solid #fff;  
    display: inline-block; 
}

.menu ul li a:hover{
    display:block; 
    color: aqua;
}

.menu ul li ul li {
    display: none; 
}

.menu ul li:hover ul li{ 
    display:block; 
}