I have a system where I need to create a clickable href link inside a div that is also clickable.
In short, I wanted to know if there is any way to create a "clickable link B" within a "clickable link A". Being that the "internal link B" has its independent link A click.
EX:
<a href="LINK_A"> <a href="LINK_B">Conteúdo do 2º link</a> </a>
Unfortunately, it is not possible. Placing a anchor within another is against the specification : / p>
12.2.2 Nested links are illegal
Link and anchor defined by element A should not be nested; one element A should not contain other elements A. (free translation)
You can at most put them side by side, in the same hierarchy.
I'll give you an answer that I do not recommend doing. But it can solve your problem in the latter case.
You can put <object> inside your <a> and from there build your menu. So you can do a hake and put a link within the other.
But before you can see that by W3C standards this should not be done : link
But if you want to do anyway, this should solve your problem. Again I do not recommend it, but it stands as a reference.
NOTE: links do not work inside Snippet, but your page will work ...
#menuHomeMaster {
display: inline-block;
width: 150px;
height: 20px;
overflow: hidden;
transition: height 300ms ease;
}
#menuHomeMaster:hover {
height: 60px;
}
object {
display: inline-block;
width: 150px;
}
a object a:hover {
font-weight: bold;
}
a:hover {
color: green;
}<a href="https://pt.stackoverflow.com" id="menuHomeMaster" target="_blank">Denúncia/Sugestão
<object><a href="http://www.uol.com.br/" class="" target="_blank">link 1</a></object>
<object><a href="http://www.globo.com.br/" class="" target="_blank">link 2</a></object>
</a>A reference source for this case: link