Create multiple tabs under one tab?-CodePudding

I have multiple tabs on a website. See the image below:

I want to put multiple tabs under one tab so if a user hovers over a tab they can see multiple tabs below it and click on them. For example, I could hover over the home tab with my cursor and then I could see multiple other tabs like download, instructions, and troubleshoot instead of having them all separate.

Question: How to put multiple tabs under another tab?

Also, I want to have all of my tabs on one page. What I mean is if I had a page something like this:

Home Page

Hello and Welcome!

Downloads

Download a file

Instructions

This is how to use the file

I basically want the tabs to be hyperlinks. If the user hovers over Home and clicks on downloads I want it to go to the downloads section on the same page where it says "Download a file" instead of going to a different page.

CodePudding user response：

Try this:


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

in css

and in html:

<button>Dropdown</button>
  <div >
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>

example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar try doing something like in the example