I have been looking at drop down menus as an alternative to just having links on pages but found an html one that looks easy and fits perfectly into html script but no idea how to make a drop down title with a link

eg: Menu

Link 1 retitled Space

But nowhere to put the url?? I tried putting it next to 'space' but the whole url appeared online without the working link.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}


.dropdown {
position: relative;
display: inline-block;
}


.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}


.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}


.dropdown-content a:hover {background-color: #f1f1f1}


.dropdown:hover .dropdown-content {
display: block;
}


.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>


<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p> I will remove this from final script


<div class="dropdown">
<button class="dropbtn">Dropdown</button>will change to menu, and colour
<div class="dropdown-content">
<a href="#">Link 1</a> - how do I add page link???
<a href="#">Link 2</a>
<a href="#">Link 3</a> eventually I would want about 20 - 30 links, maybe more
</div>
</div>


</body>
</html>