JSFiddle Recommended Layouts

JSFiddle-Layout.css

by klierik

HTML

<div class="container">
  <div class="main_menu">
    <div id="dropdown" class="dropdownbtn">
      <a id="toggle" class="button">
        <p class="selected">меню</p>
      </a>
      <div class="dropdownbtn-content">
        <p class="title1"><a href="#">ссылка 1</a></p>
        <p class="title1"><a href="#">ссылка 2</a></p>
        <p class="title1"><a href="#">ссылка 3</a></p>
        <p class="title1"><a href="#">ссылка 4</a></p>
        <p class="title1"><a href="#">ссылка 5</a></p>
      </div>
    </div>
  </div>
</div>

CSS

@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  position: relative;
}

.container {
  width: 100%;
  max-width: 1920px;
}

.main_menu {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.dropdownbtn {
  display: block;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.button,
.selected {
  width: 5em;
  background-color: yellow;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-style: hidden;
}

.dropdownbtn-content {
  display: none;
  width: 100%;
  text-align: center;
}

.dropdownbtn-content a {
  text-decoration: none;
  color: black;
  display: block;
}

.dropdownbtn-content a:hover {
  margin-left: auto;
  margin-right: auto;
  width: 13em;
  background-color: blue;
}

.dropdownbtn {
  text-align: center;
}

.dropdownbtn .button {
  display: inline-block;
}

.dropdownbtn.active .dropdownbtn-content {
  display: inline-block;
  background-color: red;
}

JavaScript

function hover(element, enter, leave) {
  element.addEventListener('mouseenter', enter)
  element.addEventListener('mouseleave', leave)
};

var menuToggle = document.getElementById("toggle");
var dropdown = document.getElementById("dropdown");

menuToggle.addEventListener('mouseenter', function() {
  dropdown.classList.add("active");
})
dropdown.addEventListener('mouseleave', function() {
  dropdown.classList.remove("active");
})