Jump to content
b2black

Criar submenu ao clicar em imagem

Recommended Posts

Então, estou tentando criar um submenu com opções quando o usuário passa o link em cima da imagem, porém não estou conseguindo, qual é o jeito certo de fazer?

 

Ao clicar no link (link-login) que é uma imagem colocada com css, abre um menu abaixo da imagem com 5 opções de link

 

<div class="nav-container">
        <nav>
            <ul class="desktop-nav">
                <li>
                    <a href="" class="link-logo"></a>
            </li>
                <li>
                    <a href="">Charm Points</a>
                </li>
                <li>
                    <a href="">Ranking</a>
                </li>
                <li>
                    <a href="">Colaboradores</a>
                </li>
                <li>
                    <a href="">Blog</a>
                </li>
                <li>
                    <a href="">Eventos</a>
                </li>
                <li>
                    <a href="">Suporte</a>
                </li>
            
                <li>

                <!--<a href="" class="link-search"></a>-->

                <form method="get" action="" class="search">
                <input name="boxsearch" type="search-text" placeholder="" />
                </form>	

                </li>
                <li>
                    <a href="" class="link-bag"></a>
                </li>

                <li>
                    <a href="" class="link-login"></a>
                </li>
            </ul>
           
        </nav>
    
</div>

 

.link-login {
    background: url('avatar.png');
    background-repeat: no-repeat;
    display: block;
    background-position: center;
    background-size: 20px;
    height: 44px;
    width: 20px;
}

.link-login:hover {
    position: relative;
  display: inline-block;
  margin-top: 50px;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By betezek
      Prezados,
      tenho uma div abaixo:
      eu gostaria de centralizar o nome dentro da imagem. o problema é que ela não centraliza, começa left e eu já tentei todos os comandos.
      eu preciso que ela já centralize no espaço!!!
      VOU USAR UM INPUT PARA DIGITAR O TEXTO!
       
       
       
      <BODY>
      <style>

      .divLeft {
          width: 140;
          height: 100px;
          float: center;
          position: relative;
      }
      #spaceText {
          padding-right: 110px;
      }
      #photo {
          width: 320px;
          height: 300px;
      }
      .textDiv{
         position: absolute;
         
         text-align: center;
      font-family:Arial;
        color: #000000;
        font-size: 9px;
        font-weight: NORMAL;
        left: 22px;
        top: 250px;
         
        
      }
      </style>
      </head>
      <body>

      <div class="divLeft">
          <img id="photo" src="imagens/jumba.png">
          <div class="textDiv">
              <h2><i id="spaceText" class="fas fa-search"></i>CENTRALIZAR</h2>
          </div>
      </div>
      </BODY>
    • By Felper
      É possível fazer uma imagem .png mover-se por uma tela de Canvas (esquerda, direita, cima, baixo)? Poderiam mostrar um exemplo caso seja possível. É que estou tentando fazer um jogo, onde o jogador se move em um labirinto. O jogador seria uma imagem. Agradeço desde já!
    • By joao b silva
      amigos é o seguinte, eu crio um grid dinamicamente com bootstrap, porem a depender do conteúdo as colunas, na mesma linha ficam com tamanhos (height) diferentes, o que não acontece quando utilizamos <table></table>. Como posso resolver isso?
    • By Alessandro Bodão
      Eai pessoal!
       
      Estou trabalhando em um site WordPress do qual foi me passado a versão demo de um tema (Ample).
       
      O problema é o seguinte: Parece não existir nenhum lugar onde eu tenha acesso pra editar todos os textos e conteúdos (Ex: Os textos padrões do tema parecem ser inacessíveis).
       
      Já fucei praticamente todo o wp-admin e os demais painéis e nada... Já tentei baixar o plugin  Elementor pra ver se me facilitava nisso e nada... Já tentei ver se conseguia achar esses conteúdos e editar pelo código das páginas php do tema e nada. Não sei mais o que fazer, por gentileza peço ajuda.
       
      Tema: https://themegrilldemos.com/ample/
      Site: https://onecv.com.br/
       

    • By alexmill466
      estou criando um site onde tem 3 tipos de produtos novidades, sucessos e vips gostaria que aparece-se cada item de cada classe aparecer no seu devido setor sei que preciso colocar id de cadastro mas como faria a referencia? alguém pode me ajudar sou iniciante. 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.