How to creat a navigation bar using html and css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Nav_bar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <ul>
       <li><a>Home</a></li>
       <li><a>Contact</a>
        <ul>
            <li><a>personalnumber</a></li>
            <li><a>Phone number</a></li>
            <li><a>Email</a></li>
        </ul></li>
       <li><a>About</a></li>
       <li><a>Rainyfacts</a>
    <ul>
        <li><a>Drazy</a></li>
        <li><a>Over cast</a></li>
    </ul></li>
       <li><a>News</a></li>
   </ul>
</body>
</html>
And the css file is here::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::lol;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
body{
    background:url(john-noonan-E-9CFTftQh4-unsplash.jpg);
    background-size: cover;
    font-style:italic;
    color:goldenrod;
}
ul{
    padding: 0px;
    margin: 0px;
    list-style:none;

}
li{
    float: left;
    width: 250px;
    height: 50px;
    background-color: black;
    opacity: 0.8;
    line-height: 20px;
    text-align: center;
    font-size: 20px;
}

ul li a{
    text-decoration: none;
    color: goldenrod;
    display: block;
}


ul li a:hover{
    background-color: green;
}


ul li  ul li{
    display: none;

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