希望这不会阻止我提问，所以我们开始...
我遇到的问题是CSS驱动的导航的下拉部分导致其下面的内容向下移动。我发现发布了类似问题的问题，但是我尝试了所提供的大多数解决方案，尽管在悬停在下拉菜单上时应用position: absolute; z-index: 100;可以阻止内容下移，但它会中断Tablink部分，导致我的社交按钮向右移动。我是HTML / CSS的新手，尽管有些人可能不相信我，但以下所有内容，都是我下班后在FreeCodeCamp等教程网站上写的。但是，当涉及到异常的代码行为（至少是newb）时，像这样的网站并没有真正为您解决问题做好准备。
以下是我的代码
$("document").ready(function() {
$(".tablink").click(function() {
$(".tabcontent").css("display", "none");
$(this).css("background-color", '');
$("#" + $(this).data("target")).css("display", "block");
});
});html {
background: url(https://images.pexels.com/photos/163585/redwood-national-park-california-hdr-landscape-163585.jpeg?auto=compress&cs=tinysrgb&h=350) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: black;
text-align: center;
font-family: Jura;
}
.frk-page {
background: url(https://images.pexels.com/photos/440731/pexels-photo-440731.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fru-page {
background: url(https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&h=350)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.about-page {
/* Background */
background: url(https://images.pexels.com/photos/36487/above-adventure-aerial-air.jpg?auto=compress&cs=tinysrgb&h=350) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* Text Stuff */
/*color: white; */
}
.contact-page {
background: url(https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: black;
}
/* Set height of body and the document to 100% to enable "full page tabs" */
body, html {
height: 100%;
margin: 0;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
font-family: Jura;
width: 19%;
overflow: hidden;
border-right: #FFF 2px solid;
}
.tablink:hover {
background-color: #777;
}
.tablink:first-child {
width: 5%;
padding: 14px;
}
.tablink:last-child {
border-right: 0px;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
display: none;
padding: 100px 20px;
height: 100%;
white-space: normal;
font-family: Jura;
}
tab1 {
padding-left: 4em;
}
.dropdown {
-webkit-transition: height 1s; /* Safari */
-moz-transition: height 1s;
float: left;
transition: height 1s;
overflow: hidden;
height: 45px;
position: absolute;
z-index: 100;
}
.dropdown:hover {
-webkit-transition: height 1s; /* Safari */
-moz-transition: height 1s;
transition: height 1s;
height: 300px;
}
.dropdown-menu {
margin-top: 15px;
}
/* Style all font awesome icons */
.fa {
padding: 10px;
font-size: 15px;
width: 50px;
text-align: left;
text-decoration: none;
}
div.tab-menu > button.tablink:first-child > i.fa {
padding: 0px;
justify-content: center;
font-size: 1.33333333em;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
/*Google */
.fa-google {
background: #dd4b39;
color: white;
}
.fa-reddit {
background: #ff5700;
color: white;
}
.fa-quora {
background: #a62100;
color: white;
}
.fa-linkedin {
background: #0077B5;
color: white;
}
.fa-github {
background: black;
color: white;
}
i.fa {
display: inline-block;
text-align: center;
justify-content: center;
align-items: center;
}
.faceroll-keyboard h3, .faceroll-keyboard p, .faceroll-updates h3, .faceroll-updates h4 {
color: black;
}
div.menu-font > button {
font-size: 14px;
}
.content {
text-align: center;
width: 100%;
}
.content > p {
background-color: white;
position: absolute;
width: 60%;
margin: 0 auto;
display:block;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FaceRoll Keyboard Blog</title>
<link rel="shortcut icon" type="image/png" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMcWt-dnuAIjO_FUsLjokCe1t29RQg_dXQQsUtL-hk26AUn2Ym">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Jura">
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<h1>Welcome to my world</h1>
<div class="tab-menu menu-font">
<button class="tablink"><i class="fa fa-home fa-lg"></i></button>
<button class="tablink" data-target="faceroll-keyboard">FaceRoll Keyboard</button>
<button class="tablink" data-target="faceroll-updates">FaceRoll Updates</button>
<button class="tablink" data-target="about-me">About Me</button>
<button class="tablink" data-target="contact-me">Contact Me</button>
<button class="tablink dropdown">Social
<div class="dropdown-menu">
<a href="https://github.com/papa0four"><i class="fa fa-github"></i></a><br />
<a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a><br />
<a href="https://twitter.com/?lang=en"><i class="fa fa-twitter"></i></a><br />
<a href="https://plus.google.com/discover"><i class="fa fa-google"></i></a><br />
<a href="https://www.reddit.com/"><i class="fa fa-reddit"></i></a><br />
<a href="https://www.quora.com/content?content_types=answers"><i class="fa fa-quora"></i></a><br />
<a href="https://www.linkedin.com/in/jesse-sabatini-1a0b10116/"><i class="fa fa-linkedin"></i></a>
</div>
</button>
</div>
<article id="faceroll-keyboard" class="tabcontent frk-page">
<h3><strong>My Programming Journey<strong></h3>
<h4><strong>What happens when a caveman dreams of becoming a programmer?</strong></h4>
<p><tab1>So, the journey began roughly 10 years ago in a small recruiters office in Suburbia, California. I had thought that when you join the military, the only honor worthy job was one that saw combat, and because jumping out of perfectly good airplanes seemed silly to me, I sought the next best thing to Special Forces,....Scout. But what does this have to do with progamming, windbag?! As Daniel Tosh once said, "It's okay baby birds, I'll feed you..."</tab1></p>
<p><tab1>Now, the day I went to sign my contract to be a scout, I had to bring along my beautiful (then 3 months pregnant) wife. You see, after my adventure at the recruiter's office, I was to take my newly wedded wife, to one of many pregnancy appointments for our first child. If we back up just a little... up until this point, my wife really had no concern or care to be apart of the process just so long as we had a means to receive medical care for our family. It was this day that my life would change <i>FOREVER</i> !</tab1></p>
</article>
<div id="faceroll-updates" class="tabcontent fru-page">
<h3>FaceRoll Updates</h3>
<h4 style="color: white">Burning my path... one broken keyboard at a time.</h4>
</div>
<div id="about-me" class="tabcontent about-page">
<h3>About Me</h3>
<h4>Why I chose to make my life difficult.</h4>
</div>
<div id="contact-me" class="tabcontent contact-page" style="color: white">
<h3>Contact Me</h3>
<h4>Get in touch, or swing by for a cup of coffee.</h4>
</div>
</body>
</html>
我知道要看的东西很多，但是由于我不确定要弄错哪里，所以我不知道要细分哪些部分以便于阅读，但是，我一直在进行操作（并且失败）大多数是.dropdown和.content函数下的CSS文件。最后，我很抱歉我编写的代码是不好的实践，还是没有sn花一现，因为我从字面上告诉自己这是为了向我7岁的孩子展示如何进行出色的编码。
无论如何，我感谢您事先提供的所有帮助。