Move links to list menu when mediascreen size is changed

Question

I’m having a hard time putting some links inside another link.

For example:

#menu_header_right{
float:right;
}
.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);}

.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;}

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

The idea is that when resizing the screen all the links are inside the "menu" link along with the link1, Link2 and link3. I appreciate any idea or direction.

Answer 1

From what I understood the only thing that is missing is to apply the media-query, in this case you can use a basic Meria-query only for width, however you need to choose the "maximum width" to apply the effect (or at least, it depends on the desired order):

In this case we will assume (by I tested) that the minimum width to use the dropdown version would be 360px (the average width of the #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;
}

Use only:

.menu_header_right {
    display: none;
}

The rule #menu_header_right a will have priority, because the Ids and more descriptive rules usually have a higher priority in the "cascade", then either you use more descriptive #menu_header_right a.menu_header_right following the highest value rule, or using !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:

• /a/143893/3635
• What is the HTML priority? "id" or "class"?