1

Ao passar o mouse em uma categoria no menu, eu gostaria que mostrasse sub-categorias. Algo desse tipo

http://prntscr.com/nmy3jq

Este é o menu que tenho:

.menu {
  width: 100%;
  background: #1f1f1f;
  border-bottom: 4px solid #a32c2e;
  font-size: 11px;
}

.menu ul {
  margin: 0 auto;
  width: 960px;
}

.menu ul li {
  list-style: none;
  float: left;
}

.menu ul li:hover {
  cursor: default;
}

.menu a {
  display: block;
  text-decoration: none;
  color: #FFFFFF;
  padding: 0 20px;
}

.menu:after,
.menu ul:after {
  content: '';
  display: block;
  clear: both;
}

.menu>ul>li>a {
  line-height: 39px;
}

.menu ul li:hover>a,
.menu ul li.active>a {
  background: #a32c2e;
  color: #FFFFFF;
}
<nav>
  <div class="menu">
    <ul>

      <li class="active"><a href="/"><i class="glyphicon glyphicon-user"></i> Tester</a></li>

      <li><a href="/"><i class="glyphicon glyphicon-globe"></i> Comunidade</a></li>
      <li><a href="/"><i class="glyphicon glyphicon-shopping-cart"></i> Loja</a></li>

      <li style="float:right"><a href="/"><i class="glyphicon glyphicon-log-out"></i> Sair</a></li>
    </ul>
  </div>
</nav>

3 Respostas 3

2

Cara primeiramente vc está no caminho certo! Sim fazendo na mão por conta própria, sem copiar códigos que outros fizeram ou de tutoriais, e muito menos usando Bootstrap! Fazendo na mão vc vai aprender CSS a fundo e que vai te ajudar pro resto da vida.

Agora a sua resposta.

Primeiro faça no HTML o sub-menu com uma nova <ul> dentro da <li> como no exemplo abaixo:

...
<ul>
        <li class="active">
            <a href="/"><i class="glyphicon glyphicon-user"></i> Tester</a>
            <ul>
                <li><a href="#">sub-1</a></li>
                <li><a href="#">sub-2</a></li>
                <li><a href="#">sub-3</a></li>
            </ul>
        </li>
         ...

Agora que vc já tem o HTML no lugar é hora do CSS, primeiro vc precisa esconder a UL com o sub menu enquanto não tiver o :hover na li, para isso use display:none. Aproveite e já coloque outras propriedades que vai precisa, como position:absolute para fazer o elemento sair do fluxo de conteúdo e não empurrar os outros elementos da tela quando aparecer.

    .active ul {
        position: absolute;
        display: none;
        flex-direction: column;
        width: auto;
        padding: 0;
    }

Agora o estilo do :hover, usei o mínimo de CSS possível para ficar fácil de vc entender o que foi feito

.active:hover ul {
    display: flex;
}

inserir a descrição da imagem aqui

Segue o código da imagem acima

.menu {
    width: 100%;
    background: #1f1f1f;
    border-bottom: 4px solid #a32c2e;
    font-size: 11px;
}

.menu ul {
    margin: 0 auto;
    width: 960px;
}

.menu ul li {
    list-style: none;
    float: left;
}

.menu ul li:hover {
    cursor: default;
}

.menu a {
    display: block;
    text-decoration: none;
    color: #FFFFFF;
    padding: 0 20px;
}

.menu:after,
.menu ul:after {
    content: '';
    display: block;
    clear: both;
}

.menu>ul>li>a {
    line-height: 39px;
}

.menu ul li:hover>a,
.menu ul li.active>a {
    background: #a32c2e;
    color: #FFFFFF;
}
.active ul {
    position: absolute;
    display: none;
    flex-direction: column;
    width: auto;
    padding: 0;
}
.active:hover ul {
    display: flex;
}
.active:hover ul li a{
    color: black;
 }
<nav>
    <div class="menu">
        <ul>
            <li class="active">
                <a href="/"><i class="glyphicon glyphicon-user"></i> Tester</a>
                <ul>
                    <li><a href="#">sub-1</a></li>
                    <li><a href="#">sub-2</a></li>
                    <li><a href="#">sub-3</a></li>
                </ul>
            </li>

            <li><a href="/"><i class="glyphicon glyphicon-globe"></i> Comunidade</a></li>
            <li><a href="/"><i class="glyphicon glyphicon-shopping-cart"></i> Loja</a></li>

            <li style="float:right"><a href="/"><i class="glyphicon glyphicon-log-out"></i> Sair</a></li>
        </ul>
    </div>
</nav>

2
  • 1
    Você é o cara :))
    – Pedro
    10/05/2019 às 19:43
  • @Pedro por nada meu jovem, acabei de dar uma atualizada no código, acho que agora ficou mais bonitinho como vc pode ver ni Gif que tb atualizei, []´s
    – hugocsl
    10/05/2019 às 19:44
2

O menu abaixo foi extraído do site W3School, e você pode acessá-lo aqui.

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>

0

Utilize o Bootstrap e você vai consegui fazer várias coisas com facilidade: https://getbootstrap.com.br/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado" aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="conteudoNavbarSuportado">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Ação</a>
          <a class="dropdown-item" href="#">Outra ação</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Algo mais aqui</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

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 .