So I understand the only thing you need to do is to apply the media-query, in this case you can use a basic meria-query only for width, however you must choose the "maximum width" to apply the effect , depends on the order you want):
In the case suppose (by what I tested) that the minimum width to use the dropdown version would be 360px (average width of #menu_header_right ), so you can use something like:
@media (max-width: 360px) {
/* seu estilo aqui */
}
#menu_header_right{
float:right;
}
#menu_header_right a {
display: inline-block;
}
.dropdown{
width:80px;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right:0px;
top:55px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
#menu_header_right .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media (max-width: 360px) {
#menu_header_right{
float: none;
}
#menu_header_right a{
display: block;
}
.dropdown{
width: auto;
position: relative;
display: block;
}
.dropdown-content {
display: block;
position: static;
}
#menu_header_right a.menu_header_right {
display: none;
}
}
<div id="menu_header_right">
<a class="anunciar" href="pg_anunciar.php"/>Anuciar Imóvel</a>
<a class="entrar" href="pg_logout.php"/>Logout</a>
<a id="pg_inicial_perfil" href="pg_perfil.php"/></a>
<a class="entrar" href="pg_login.php"/>Login</a>
<a class="criarconta" href="pg_cadastro_usuario.php"/>Criar Conta</a>
<div class="dropdown">
<a class="menu_header_right" href="pg_cadastro.php"/>Menu</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
Note that all elements within the media-query overwrite the initial properties:
#menu_header_right{
float: none;
}
#menu_header_right a{
display: block;
}
.dropdown{
width: auto;
position: relative;
display: block;
}
.dropdown-content {
display: block;
position: static;
}
And this is a "special" case:
#menu_header_right a.menu_header_right {
display: none;
}
If you use only:
.menu_header_right {
display: none;
}
The #menu_header_right a rule will have priority, since the more descriptive IDs and rules generally have a higher priority in the "cascade", so either you use more descriptive #menu_header_right a.menu_header_right following the higher value rule, or use !important .
In case I put a display: none; because if the links are vertical and visible, the menu will not be necessary.
To understand more about the priorities I recommend these links:
