Can I add a dropdown menu to an existing navigation page?

Hi!

Am I able to add a dropdown menu to an existing navigation page? For example; I have built an overall services page for a client, as well as seperate pages for each of their key services. There are buttons on the overall services page to these 'sub' pages, if people want to explore further.

I would like to still keep the overall services page in the navigation and have the option to hover and see a dropdown menu as well. People can then choose to select the main "our services" page in the navigation or the other pages in the drop down menu. 

I have some recollection of being able to do this on 7.0 but haven't built a site with this option for years and can't see how to do it. Is there a way I'm missing, do I need to add a code to the site to be able to do this?

You mean when users hover on Bespoke Relocation/Downsizing/Estate Clearing >> It show a sub dropdown, something like this?

Hi! The dropdown itself is fine. I can do that easily. I want for the "our services" to also be a clickable link that takes you to a seperate page.

Have you got 2 dropdown menus here? each with their own sub categories? I can do this but was worried with usability? how do you find it?

If make dropdown title clickable, you will need to use custom code. If you share site url, I can check & give you code.

The site isn't live yet, it's still in draft mode. Can you help without it. I really appreciate the help

This just example code, you can replace with ID on your site. Code should add to Website > Website Tools > Code Injection > FOOTER

and DO NOT add to Custom CSS.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$("div.header-nav-item:nth-child(2)>a").click(function() {
			var link = $(this).text(),
				href = "https://google.com";
			window.location.href=href;
		});
});
</script>

This will make second item clickable

thank you, I'll give it a try!