JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<ul id="menue">
<li>
<a href="#" class="myButton">Accueil</a>
<ul>
<li><a href="#">Lien2</a></li>
<li><a href="#">Lien2</a></li>
<li><a href="#">Lien2</a></li>
</ul>
</li>
<li><a href="#" class="myButton2">Forum</a>
<ul>
<li><a href="#">Lien2</a></li>
<li><a href="#">Lien2</a></li>
<li><a href="#">Lien2</a></li>
</ul>
</li>
<li><a href="#" class="myButton3">Contact</a>
<ul>
<li><a href="#">Lien2</a></li>
<li><a href="#">Lien2</a></li>
<li><a href="#">Lien2</a></li>
</ul>
</li>
<li><a href="#" class="myButton4">Deconnexion</a>
<ul>
<li><a href="#">Lien2</a></li>
<li><a href="#">Lien2</a></li>
<li><a href="#">Lien2</a></li>
</ul>
</li>
</ul>
</body>
</html>
CSS
html, body {
margin: 1;
padding: 1;
}
body{
font-family: Verdana, sans-serif;
font-size: 100%;
width:800px;
}
.myButton {
background-color:#44c767;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
border:4px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:28px;
padding:6px 25px;
text-decoration:none;
text-shadow:2px 2px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}
.myButton2 {
background-color:#385d94;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
border:4px solid #13265c;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:28px;
padding:6px 25px;
text-decoration:none;
text-shadow:2px 2px 0px #2f6627;
}
.myButton2:hover {
background-color:#202b1a;
}
.myButton2:active {
position:relative;
top:1px;
}
.myButton3 {
background-color:#97b326;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
border:4px solid #4d6616;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:28px;
padding:6px 25px;
text-decoration:none;
text-shadow:2px 2px 0px #2f6627;
}
.myButton3:hover {
background-color:#354a16;
}
.myButton3:active {
position:relative;
top:1px;
}
.myButton4 {
background-color:#de74a7;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
border:4px solid #992273;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:28px;
padding:6px 25px;
text-decoration:none;
text-shadow:2px 2px 0px #2f6627;
}
.myButton4:hover {
background-color:#354a16;
}
.myButton4:active {
position:relative;
top:1px;
}
#menue, #menue ul
{
list-style:none;
line-height : 21px;
text-align:center;
}
#menue
{
font-weight:bold;
font-family: Arial;
font-size:12px;
}