Can I create a dropdown menu inside a a href?

Question

In case I have a tag <a>, I can add just like a tag <ul> with <li> to create a dropdown menu

<a href="out_denuncia.aspx" id="menuHomeMaster">Denúncia/Sugestão</a>

or just like that:

    <ul class="nav">
        <ul>Contato
           <li><a href="#">Fale Conosco</a></li>
           <li><a href="#">Sugestões</a></li>
        </ul>
    <ul>

Answer 1

I will give an answer that I do not recommend you do. But it can solve your problem as a last resort.

Vc po put a <object> within your <a> and from there build your menu. So you can make a Hake and put one link inside the other.

But first see that according to W3C standards this should not be done: http://w3c.github.io/html/single-page.html#the-a-element

But if you want to do it anyway it should solve your problem. Again I do not recommend, but it stands as a reference.

OBS: the links don’t work inside the Snippet but on 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://answall.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 that case: https://stackoverflow.com/questions/9882916/are-you-allowed-to-nest-a-link-inside-of-a-link

Answer 2

If I have understood your real goal, one of the following solutions will serve:

Solution 1

.dropdown { /* Tamanho do wrapper do dropdown */
  width: 150px;
}

.dropdown a { /* Retira sublinhado das âncoras */
  text-decoration: none;
}

.dropdown-button { /* Estiliza o botão dropdown */
  display: inline-block;

  color: white;
  font-weight: bolder;
  text-align: center;
  vertical-align: middle;

  background: purple;
  padding: 10px 20px;

  border-radius: 5px;
}

.dropdown-menu { /* Estiliza o menu dropdown */
  width: 100%;

  border: 1px solid grey;
  border-radius: 5px;

  display: none;
}

.menu-item { /* Estiliza cada item do dropdown */
  display: block;

  width: 100%;

  text-align:center;
}

/* Mágica que você pode estar precisando é o seguinte: */

/**
  * Seleciona o próximo elemento irmão do .dropdown-button, quando damos foco no dropdown.
  * Portanto, o irmão (menu de itens) é visualizado. */
.dropdown-button:focus + .dropdown-menu { 
  display: block;
}

.dropdown-menu:hover { /* Mantém o menu aberto, quando clicamos em algum item*/
  display: block;
}

<div class="dropdown">
  <a href="#0" class="dropdown-button">Dropdown click</a>
  <div class="dropdown-menu">
      <a href="#1" class="menu-item">1</a>
      <a href="#2" class="menu-item">2</a>
      <a href="#3" class="menu-item">3</a>
  </div>
</div>

Solution 2

.dropdown { /* Tamanho do wrapper do dropdown */
  width: 150px;
}

.dropdown a { /* Retira sublinhado das âncoras */
  text-decoration: none;
}

.dropdown-button { /* Estiliza o botão dropdown */
  display: inline-block;

  color: white;
  font-weight: bolder;
  text-align: center;
  vertical-align: middle;

  background: purple;
  padding: 10px 20px;

  border-radius: 5px;
}

.dropdown-menu { /* Estiliza o menu dropdown */
  width: 100%;

  border: 1px solid grey;
  border-radius: 5px;

  display: none;
}

.menu-item { /* Estiliza cada item do dropdown */
  display: block;

  width: 100%;

  text-align:center;
}

/* Mágica que você pode estar precisando é o seguinte: */

/**
  * Seleciona o próximo elemento irmão (menu) do .dropdown-button, quando flutuamos sobre ele.
  * Portanto, o irmão (menu de itens) é visualizado. */
.dropdown-button:hover + .dropdown-menu { 
  display: block;
}

.dropdown-menu:hover { /* Mantém o menu aberto, quando estamos flutuando fora do botão */
  display: block;
}

<div class="dropdown">
  <a href="#0" class="dropdown-button">Dropdown</a>
  <div class="dropdown-menu">
      <a href="#1" class="menu-item">1</a>
      <a href="#2" class="menu-item">2</a>
      <a href="#3" class="menu-item">3</a>
  </div>
</div>

Answer 3

Dude, what is your need to dropdown as you posted, some test, curiosity?

If it’s to work as a normal dropdown and the values are static, use the simplest way to mount a DDL, if you keep adding Csss and Javascripts for no reason just to do magic, it will make your code complex, keep it simple and uncomplicated, avoid making maintenance difficult and creating bugs in your code.

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

https://www.w3schools.com/tags/tag_select.asp

Kiss - Keep It Simple :)