In case I have a <a> tag, I can add a <ul> tag with <li> to create a dropdown menu
<a href="out_denuncia.aspx" id="menuHomeMaster">Denúncia/Sugestão</a>
or just the same:
<ul class="nav">
<ul>Contato
<li><a href="#">Fale Conosco</a></li>
<li><a href="#">Sugestões</a></li>
</ul>
<ul>
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.
OBS: 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
If I have understood your real purpose, 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>Dude, what's your need to do a dropdown as posted, some test, curiosity?
If it is to function as a normal dropdown and the values are static, use the simplest way to mount a DDL, if you add CSSs and Javascripts just for magic, it will leave your code complex, keep it simple and without complicate, avoid making it difficult to maintain and create 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>Kiss - Keep It Simple:)