CSS Drop Down Menu

HTML Drop Down Menu

It is certainly possible without JS, by setting your dropdown's nested options to display none, and then to flex or block them upon hovering their parent. Here's a simple example using your code:

https://codepen.io/ehavener/pen/gBLOXV

HTML

 <div class="main-menu">
    <ul class="menu-list">                 
     <li><a href="#">One</a></li>
     <li><a href="#">Two</a></li>
     <li><a href="#">Three</a></li>
     <li><a href="#">Four</a></li>
     <li><a href="#">Drop Down</a>
       <ul>
         <li><a href="#">One</a></li>
         <li><a href="#">Two</a></li>
       </ul>
    </li>   
   </ul>
 </div>

CSS

.main-menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
}

.main-menu ul li a {
  padding: 20px;
  display: block;
  color: #ddd;
  text-decoration: none;
  background: #21263E;
}

.main-menu ul li ul {
  display: none;
}

.main-menu ul li:hover ul {
  display: flex;
  flex-direction: column;
}

.main-menu ul li:hover a {
  color: #fff;
}

Dropdown menu using html and css hides behind the h1?

It's because you forgot to set the dropdown backgroundcolor:

.drop-down__button:hover + .drop-down__list {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  background-color: white;
}

By making this adjustment it should work as expected.

How to align the dropdown menu with the button

You can create a container div to put both the menu and the button themselves into and then give that container absolute positioning properties like you're doing with your menu. You'll have to adjust your menu position so when it appears it's not overlapping the button but I took care of that in the code. Also, you'll need to modify the position on the menu itself if you want the button and the menu to be on the absolute right and not offset and overflowing the right side of the screen.

See: https://developer.mozilla.org/pt-BR/docs/Web/CSS/position

function myFunction() {
  var x = document.getElementById("Demo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className += " w3-hide";
    setTimeout(function() {
      x.className = x.className.replace(" w3-show", "");
      x.className = x.className.replace(" w3-hide", "");

    }, 500)
  }
}

.container {
  display: block;
  margin: 0 0;
  position: absolute;
  top: 10px;
  right: 0px;
}

/*Items menu*/
.user_menu_item {
  display: flex;
  align-items: center;
}

.user_menu_item:hover {
  background: whitesmoke;
  border-left: 4px solid blue;
  transition: 0.3s;
}

.user_menu_item:not(:hover) {
  transition: 0.3s;
}

.user_menu_item>a {
  display: flex;
  align-items: center;
  padding: 12px 10px 12px 10px;
  width: 100%;
  font-size: 14px;
  color: #75777D;
}

.w3-container {
  position: absolute;
  top: 25px;
  right: 0px;
}

.w3-dropdown-click {
  display: flex;
  position: relative;
}

.w3-dropdown-content {
  display: none;
  background-color: whitesmoke;
  min-width: 160px;
  overflow: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  position: relative;

  animation: animateFromBottom 0.6s
}

@keyframes animateFromBottom {
  from {
    bottom: -50px;
    opacity: 0
  }

  to {
    bottom: 0;
    opacity: 1
  }
}

@keyframes animateToBottom {
  from {
    bottom: 0;
    opacity: 1
  }

  to {
    bottom: -50px;
    opacity: 0
  }
}

.w3-bar-block .w3-bar-item {
  width: 100%;
  display: block;
  padding: 8px 16px;
  text-align: left;
  border: none;
  white-space: normal;
  float: none;
  outline: 0;
}

.w3-show-block,
.w3-show {
  display: block !important
}

.w3-dropdown-content.w3-hide {
  animation: animateToBottom 0.6s
}

.w3-button {
  display: block;
}

<div class="container">
  <button onclick="myFunction()" class="w3-button">Click Me!</button>

  <div class="w3-container">
    <div class="w3-dropdown-click">

      <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
        <div class="user_menu_item">
          <a href="/account">
            <span class="link_text">Dashboard</span>
          </a>
        </div>

        <div class="user_menu_item">
          <a href="ordini">
            <span class="link_text">I miei ordini</span>
          </a>
        </div>

        <div class="user_menu_item">
          <a href="libreria">
            <span class="link_text">Downloads</span>
          </a>
        </div>

        <div class="user_menu_item">
          <a href="impostazioni">
            <span class="link_text">Impostazioni</span>
          </a>
        </div>

        <div class="user_menu_item">
          <a href="wp-login.php?action=logout">
            <span class="link_text">Logout</span>
          </a>
        </div>
      </div>

    </div>
  </div>
</div>

Dropdown Menu with pure CSS and HTML

There is a way to handle clicks with pure CSS.
It's not the best way (because that's not what CSS is made for) but it should work. Basically you'll have to use a checkbox with a label and style according to the state of the checkbox.

Here is an example: https://css-tricks.com/the-checkbox-hack/

How to fix broken dropdown menu CSS

The padding on your list items can be adjusted as a possible solution to the spacing issues that are pushing them outside the desired space.

  nav {
  position: absolute;
  left: 0;
  top: 0;
  height: 20%;
  width: 98%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav img {
  width: 165px;
}

.nav_links {
  flex: 1;
  text-align: right;
}

.nav_links ul li {
  list-style: none;
  display: inline-block;
  /*RIGHT HERE*/
  padding: 8px 12px;
  position: relative;
   width: fit-content;
}

.nav_links ul li a {
  font-family: Segoe UI;
  color: white;
  text-decoration: none;
  font-size: 25px;
}

.nav_links ul li::after {
  content: "";
  width: 0%;
  height: 2px;
  background: white;
  display: block;
  margin: auto;
  transition: 0.5s;
}

.nav_links ul li:hover::after {
  width: 100%;
}

.dropdown{
  position: absolute;
  width: 170px;
  height: 270px;
  left:0;
  right: 0;
  top:calc(85% + .15rem);
  padding: .75px;
  text-align: center;
  background-color: white;
  border-radius: 7px;
}

.dropdown li{
  position: absolute;
 
}

  <nav>
        <a href="Index.html" id="logo"><img src="Images/cflogo_main.png"></a>
        <div class="nav_links" id="navLinks">
            <i class="fa fa-window-close" onclick="hideMenu()"></i>
            <ul>
                <li><a href="">Le collège</a>
                    <ul class="dropdown">
                        <li>Mot de la direction</li>
                        <li>Historique</li>
                        <li>Les enseignants</li>
                        <li>Calendrier scolaire</li>
                        <li>Fondation</li>
                    </ul>
                </li>
                <li><a href="">Vie scolaire</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Portail</a></li>
                <li><a href="">Admission</a></li>
            </ul>
        </div>
        <i class="fa fa-bars" onclick="showMenu()"></i>
    </nav>