.header_menu {
  ul#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--color-nav-menu-bg);

    li {
      float: left;
    }

    li a,
    li button,
    li input[type="submit"],
    .dropdown-button {
      display: inline-block;
      color: var(--color-nav-menu-fg);
      text-align: center;
      padding: 8px 10px;
      text-decoration: none;
    }

    li button,
    li input[type="submit"] {
      font: inherit;
      margin: 0;
      border: none;
      background: inherit;
    }

    .dropdown-button::after {
      /* Serve mettere il triangolo in giù? Usare quello aperto? */
       content: " ▾";
    }

    li a:hover,
    li button:hover,
    li input[type="submit"]:hover,
    .dropdown:hover .dropdown-button {
      color: var(--color-nav-menu-bg);
      background-color: var(--color-nav-menu-selected-bg);
    }

    li.dropdown {
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: var(--color-nav-menu-bg);
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px var(--color-shadow);
      z-index: 1;
    }

    .dropdown-content a,
    .dropdown-content button,
    .dropdown-content input[type="submit"] {
      color: var(--color-nav-menu-fg);
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    form.button_to {
      width: 100%;
    }

    .dropdown-content button,
    .dropdown-content input[type="submit"] {
      cursor: pointer;
      width: 100%;
    }

    .dropdown-content a:hover {
      background-color: var(--color-nav-menu-selected-bg);
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }
  }
}