How to make links with sub-links

Asked

Viewed 724 times

-1

Hello.

How to make a link and when it is clicked, show more links below?

For example: a link of statistics of issues resolved on a website and that when clicking on this link, displays the links: discipline, subject, banking. That is, choose the type of statistics.

Obs, searching the internet, vi drop down, but the links are in visible lists and that’s not the idea. I want lists that are only shown by clicking on the link.

html

  • It is pending, but clearer than that, only those who do not know how to question Portuguese. Or the questions only make sense when they start with code?

  • Perhaps illustrating helps. put 2 images, one as it is before clicking, and another after clicking. I didn’t participate in the closing, but I can imagine more than one thing if I just look at your text. A good exercise to take advantage of the site (and maybe other things besides the site), is to assume that other people may have reason to question (or close the question, as in your case), even if it seems to you very obvious.

2 answers

2

Use the HTML5 Details tag, see an example of usage http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_details

Example from W3schools website:

<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

  • 1

    It is worth mentioning that it has not yet been adopted by all major browsers.

  • @Thank you for the answer. It worked. I didn’t illustrate with code or image because I was very clear. It would be redundant to try to clarify more than that. I get annoyed with these unnecessary prepotencies.

  • @Andrénascimento I do not know why the people did not understand your question, in my view, even without code this very explicit what you wanted, hugs.

1

You can do it using the property :active of css.

Example

ul{
  list-style:none;
}

ul a{
  text-decoration:none;
}

li{
  cursor:pointer;
  float:left;
  position:relative;
  width:150px;
  height:20px;
  border:solid 1px #CCC;
}

ul ul{
  display:none;
  position:absolute;
  top:100%;
}

ul li:active ul{
  display:block;
}
<ul>
  <li>
      <a href="javascript:void(0)">MENU</a>
      <ul>
        <li>
            <a href="javascript:void(0)">SUB MENU</a>
        </li>
      </ul>
  </li>
</ul>

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.