1

No caso tenho uma tag <a>, consigo adicionar igual uma tag <ul> com <li> para criar um menu dropdown

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

ou apenas assim mesmo:

    <ul class="nav">
        <ul>Contato
           <li><a href="#">Fale Conosco</a></li>
           <li><a href="#">Sugestões</a></li>
        </ul>
    <ul>
6
  • Sua pergunta ficou meio confusa. Vc quer que ao passar o mouse no Link `<a> aparece um DropMenu com algumas opções é isso?
    – hugocsl
    13/03/2018 às 20:14
  • Isso mesmo, ao passar ou clicar no <a> mostrar as opções. 13/03/2018 às 20:27
  • Sem JS acho que vc não vai conseguir, simplesmente pq vc não pode ter um Link dentro do outro, tipo <a href="out_denuncia.aspx"><a href="#"></a></a>
    – hugocsl
    13/03/2018 às 20:35
  • Qual seria a vantagem nisso? Vc não pode colocar um <a> dentro de outro <a>
    – Sam
    13/03/2018 às 21:45
  • Não seria melhor uma lista de <a>s que aparecesse no mouseover?
    – Largato
    13/03/2018 às 22:32

3 Respostas 3

0

Vou da um resposta que eu não te recomendo fazer. Mas ela pode resolver o seu problema em último caso.

Vc po colocar um <object> dentro do seu <a> e partir dai construir seu menu. Assim vc consegue fazer um hake e colocar um link dentro do outro.

Mas antes veja que segundo as normas da W3C isso não deve ser feito: http://w3c.github.io/html/single-page.html#the-a-element

Mas se quiser fazer mesmo assim isso deve resolver seu problema. Mais uma vez não recomendo, mas fica como uma referência.

OBS: os links não funcionam dentro do Snippet mas na sua página vai dar certo...

#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>

Uma fonte de referência para esse caso: https://stackoverflow.com/questions/9882916/are-you-allowed-to-nest-a-link-inside-of-a-link

0

Se eu tiver entendido seu objetivo real, uma das seguintes soluções servirão:

Solução 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>

Solução 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>

0

Cara, qual a sua necessidade de fazer um dropdown conforme postou, algum teste, curiosidade?

Caso seja para funcionar como um dropdown normal e os valores forem estáticos, utilize a forma mais simples de montar um DDL, se ficar adicionando CSSs e Javascripts a toa somente para fazer mágicas, vai deixar seu código complexo, mantenha simples e sem complicar, evite dificultar a manutenção e criar bugs no seu código.

<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 :)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .