0
私は同様の問題に関するいくつかの回答を見てきましたが、これを私のコードに組み込むことはできません。絶対位置とインラインブロックは絶対位置を通るフローから取り出されるため、互いに作用しないことを理解しています。HTML/CSS絶対位置とインラインブロックナビゲーションバー
ナビゲーションバーのドロップダウンメニューを通常のドロップダウンメニューのように表示しようとしています。この問題の解決策を見つけるために、相対的な配置は、ナビゲーションバー全体を実際のドロップダウンメニューとともに呼び出す（コードを実行して、ひどい説明をしてください）。私が何をすべきかを理解しようと約1時間を費やしたので、誰かが私にここで何をする必要があるかを私に見せることができれば感謝します。
また、余計なことがある場合は、このナビゲーションバー内に要素の中心を合わせる方法を理解しようとしています。しかし、これは優先事項ではありません。
はここ<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<style>
.font {
\t font-family: "open sans";
}
\t /* Initial Nav Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
left: 0;
margin-top: 0;
top: 0;
position: absolute;
}
\t /* Where buttons float */
li {
float: left;
}
\t /* Hover color */
\t \t .active {
\t \t \t background-image: -webkit-linear-gradient(top, black 0%, #193c5a 100%);
\t \t \t background-image: -o-linear-gradient(top, black 0%, #193c5a 100%);
\t \t \t background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
\t \t \t background-repeat: repeat-x;
\t \t \t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
\t \t }
\t
\t \t \t li a:hover, .dropdown:hover .dropbtn {
\t \t \t background-image: -webkit-linear-gradient(top, black 0%, #193c5a 100%);
\t \t \t background-image: -o-linear-gradient(top, black 0%, #193c5a 100%);
\t \t \t background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
\t \t \t background-repeat: repeat-x;
\t \t \t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
\t \t }
\t
\t \t \t .dropdown-content a:hover {
\t \t \t background-image: -webkit-linear-gradient(top, black 0%, #193c5a 100%);
\t \t \t background-image: -o-linear-gradient(top, black 0%, #193c5a 100%);
\t \t \t background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
\t \t \t background-repeat: repeat-x;
\t \t \t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
\t \t }
\t \t
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar-default {
\t background-image: -webkit-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
\t background-image: -o-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
\t background-image: linear-gradient(to bottom, #7eb0db 0%, #2a6496 100%);
\t background-repeat: repeat-x;
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}
.wrapper-border-radius {
\t text-align: center;
\t width: 100%;
\t margin: 0;
\t padding: 0;
}
</style>
<div class="wrapper-border-radius">
\t <ul class="navbar-default">
\t \t <li><a class="font active" href="#">Home</a></li> \t
\t \t
\t \t <li class="dropdown navbar-default">
\t \t
\t \t <a class = "font" href="#" class="dropbtn">Classes</a>
\t \t <div class="dropdown-content navbar-default">
\t \t \t \t \t <a class = "font" href="physics.html">Physics</a>
\t \t \t \t \t <a class = "font" href="math.html">Math</a>
\t \t \t \t \t <a class = "font" href="humanities.html">Humanities</a>
\t \t \t \t \t <a class = "font" href="stem.html">STEM</a>
\t \t \t \t \t <a class = "font" href="STW.html">STW</a>
\t \t \t \t \t <a class = "font" href="spanish.html">Spanish</a>
\t \t \t \t \t <a class = "font" href="computerscience.html">Computer Science</a>
\t \t </div> \t
\t \t \t <li><a class = "font" class="tend" href="contactme.html">About Me</a></li>
\t \t \t <li><a class = "font" href="stemproject.html">STEM Project</a></li>
\t \t \t <li><a class = "font" class="tend"href="soccer.html">Sports</a></li>
\t \t \t \t <li><a class = "font" class="tend" href="contactme.html">Contact Me</a></li>
\t \t
\t </ul>
</div>
</html>