Кнопка меню в середине домашней страницы
<!DOCTYPE html>
<title> Thierra Walker
<h1 id="title"> Thierra Walker.</h1>
<div class="menu">
MENU
<div id="myDropdown" class="menu-content">
<a href="mission.html">MISSION</a>
<a href="#"> MUSIC/PERFORMANCES</a>
<a href="#"> MOTIVATION</a>
<a href="contactform.html">CONTACT</a>
</div>
</div>
<br><br>
<h3 id="mnm">M o t i v a t i o n | M u s i c</h3><h3>
<div class="buttons">
SoundCloud
Youtube
Instagram
</div> box-shadow-menu {
position: relative;
padding-left: 2em;
padding-bottom: 1em;
padding-top: 1em;
background-color: rgb(219,175,31);
font-family: century gothic;
}
.box-shadow-menu:before {
content: "";
position: absolute;
left: 0;
top:0;
width: 1em;
height: 0.15em;
background: black;
box-shadow:
0 0.25em 0 0 black,
0 0.5em 0 0 black;
font-size:22px
}
#button1,#button2,#button3,#button4 {
background-color: rgb(239,101,138);
border:none;
color: white;
padding: 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
border-radius: 4px;
font-family: century gothic;
cursor: pointer;
}
#title{
font: 400 100px/1.5 'Pacifico', Helvetica, sans-serif;
color: white;
text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);
font-size: 60px;
text-align: center;
}
h3{
text-align: center;
font-family: century gothic;
color:white;
font-weight: lighter;
font-size: 12px;
font-stretch: extra-expanded;
}
body{
background-color: rgb(219,175,31);
background-repeat: no-repeat;
}
figure{
display: inline-block;
}
p{
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 14px;
}
img {
padding:1px;
border:1px solid #021a40;
}
.menubtn{
background-color:rgb(250,238,160);
color: white;
padding: 16px;
border:none;
cursor: pointer;
border-radius:none;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 14px;
}
.menubtn:hover, .menubtn:focus{
background-color: ;
}
.menu{
position:center;
display: inline-flex;
color: black;
}
.menu-content{
display: none;
position: absolute;
background-color:black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.menu-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.menu-content a:hover {
background-color: black;
}
.show{
display: block;
}
Что я уже пробовал:
попробовал использовать позицию:относительная , я также попробовал использовать другой макет, и к моему ужасу ничего не получилось, но это мой первый сайт.