Drop-down menu HTLM5 and CSS3 only doesn't work

Hello the professor ask me to do this:

and here is my code HTML5 and CSS3

Effet survol


body{ background-color: yellow; }
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;


.menu {
height: 40px;
width: 100%;
background: #080045;
border-radius: 5px;

.menu a {
text-transform: lowercase;
text-decoration: none;
color: white;
font-family: arial verdana sans-serif;
font-weight: bold;
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 100px;

.menu li a{
display: block;
border-left: 1px solid white;
border-right: 1px solid white;
padding: 0px 190px;
margin: 6px 0px;
transition-property: background-color, color,text-transform;
.menu li:first-child a { border-left: none; }
.menu li:first-child a { border-right: none; }
.menu li a:hover{ background-color: #fff; color: #1e00fd; text-transform: uppercase;}

.menu ul{
position: relative;
top: 40px;
left: 0px;
color: white;
opacity: 0;
background: black

.liste a :first-child {
border-left: none;

Preformatted textindent preformatted text by 4 spaces

Can you guys please help me do the drop down menu or help me find out my mistake

Take a look at this link.