How to add dropdown to menu

Question

When hovering over a category in the menu, I would like you to show sub-categories. Something like this

This is the menu I have:

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

Answer 1

The menu below was extracted from the site W3school, and you can access it here.

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

Answer 2

Guy first you’re on the right track! Doing it by hand on your own, without copying codes that others have done or tutorials, let alone using Bootstrap! Doing in hand you will learn CSS in depth and that will help you for the rest of your life.

Now for your answer.

First make in HTML the sub-menu with a new <ul> within the <li> as in the example below:

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

Now that you already have HTML in place it’s time for CSS, first you need to hide the UL with the sub menu until you have the :hover in li, for that use display:none. Enjoy and already put other properties you will need, as position:absolute to get the element out of the content stream and not to push the other elements of the screen when it appears.

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

Now the style of :hover, I used as little CSS as possible to make it easy for you to understand what was done

.active:hover ul {
    display: flex;
}

Follow the image code above

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

Answer 3

Use Bootstrap and you will be able to do many things with ease: 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>