Making a drop down menu in HTML and CSS - html

Question

I want to make a dropdown menu just using html and css. However, I am unable to do it. I want to make the others list item a dropdwon menu. Can anyone help me with that?
Here's my CSS code:
```
nav {
background-color: #01a6f0;
}
.navbar {
list-style: none;
float: right;
margin-right: 10rem;
margin-top: 2.6rem;
margin-bottom: .5rem;
}
.navbar li {
display: inline-block;
padding: 1rem 1rem;
}
.navbar li:hover {
background-color: #01A6FE;
}
.navbar li a {
color: #fff;
}
```
Here's the HTML code
```
<nav>
<ul class="navbar">
<li>Home</li>
<li>Puzzles</li>
<li>Stories</li>
<li>Goods</li>
<li class="dropdown-link">Others
<ul class="dropdown-menu">
<li>Under The Sea</li>
<li>Middle The Sea</li>
<li>Ovver The Sea</li>
</ul>
</li>
</ul>
</nav>

Answer 1

Try this example with just HTML and CSS:
It is from this site if you want to read more about this code:
https://css-tricks.com/solved-with-css-dropdown-menus/
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
background: darkorange;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: darkorange;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: red;
cursor: pointer;
}
ul li ul {
background: orange;
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<nav role="navigation">
<ul>
<li>One</li>
<li>Two
<ul class="dropdown">
<li>Sub-1</li>
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li>Three</li>
</ul>
</nav>