Attaching a HTML anchor link to a Dropdown in a Nav menu bar-CodePudding

<div >
                    <button ><a href="#Control-Center"> Control Center</a>
                    </button>
                    <div >
                        <a href = "">Trend</a>
                        <a href = "">Intel</a>
                    </div>
                </div>

I have a section on my webpage called Control center and I want to make it so that when someone clicks on the Nav Bar, it takes them to that section of the page. I made the Drop down of the Nav Bar on hover so that when they click on the nav bar it would take them to different sections within the page. When I add <a href="#Control-Center"> part to this the nav bar gets all buggy. I tried changing the heiarchy like this:

<div >
                    <a href="#Control-Center"><button >Control Center</button></a>
                    <div >
                        <a href = "">Trend</a>
                        <a href = "">Intel</a>
                    </div>
                </div>

but it still does not look good. There is functionality but the dropdown goes haywire.

Any advice will be appreciated :)

Thank You

CodePudding user response：

I encountered the same issue a week ago when using this web template: W3 school template.

It wouldn't jump in the normal sense (out of that Top Nagivation bar). But it WOULD jump there when I duplicated that JumpTo link on the main page near the top (and hidden it in a closed JS script), then when I click on the top navigation bar button it does jump down to the very bottom of the page where I want it to land. See below how we did it.

TOP NAV:

<a href="#JumpTo" >Projects</a>

Somewhere near top of page but hidden:

<!--<a href="#JumpTo" >&nbsp;</a>-->

Destination at bottom of page in footer (where I tested it).

<footer id="JumpTo" >

CodePudding user response：

I suppose, not precisely what you're looking for, but maybe try an HTML details element?

<details>
<a href="https://ronnieroyston.com">link1</a><br>
<a href="https://ronnieroyston.com">link2</a><br>
<a href="https://ronnieroyston.com">link3</a>
</details>