jsfiddle_1

jsfiddle_1_css

HTML

<!doctype html>
<html lang="ru">
<head>
<title>меню контекста</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="container">
    <div class="main_menu">
      <div class="dropdownbtn">
<a 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>

</body>
</html>

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: 6em;
	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:hover .dropdownbtn-content {
	display: inline-block;
	background-color: red;
}