尝试使用flexbox在导航栏中为li创建下拉菜单，但出于某种原因，下拉菜单的内容会显示在第一个li旁边。 （我尝试在css nav中使用的代码＆gt; ul＆gt; li＆gt; ul）
header{
border-color: #DC143C;
background-color: #DC143C;
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
}
body{
background-color: black;
}
@font-face{
font-family: TransFormers;
src: url('../fonts/Transformers Movie.ttf') format('truetype');
}
.nav-bar{
background-color: #DC143C;
}
.nav-bar ul{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
list-style: none;
}
.nav-bar a{
text-decoration: none;
border-radius: 30px;
text-align: center;
color: black;
width: 10%;
font-size: 2em;
font-weight: bold;
font-family: TransFormers;
}
nav > ul > li > ul{
background-color: black;
color: #DC143C;
display: flex;
flex-direction: column;
border-bottom: soilid 1px #DC143C;
}
nav > ul > li > ul > li:hover{
text-decoration: none;
}
.nav-bar a:active{
text-decoration: underline !important;
}
.nav-bar a:hover{
borde-bottom: soild 2px black;
}
.footer{
border-color: #DC143C;
background-color: #DC143C;
color: black;
}
h3.bottom{
margin:0px,0px,0px,0px;
}
ul.bottom{
text-align: center;
list-style-type: none;
}
li.bottom{
display: inline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Militia</title>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="./CSS/style.css">
<link rel="stylesheet" type="text/css" href="./CSS/main-content.css">
<script src="https://use.fontawesome.com/c83075ea7c.js"></script>
</head>
<body>
<div id="container">
<header>
<nav role="navigation" class="nav-bar">
<ul class"nav-bar">
<li><a href="index.html";>Home</a></li>
<ul>
<li>
<a href="#shop";>Shop</a>
</li>
<li>
<a href="#shirts";>Shirts</a>
</li>
</ul>
<li><a href="#archives";>Archives</a></li>
<li><a href="#suggestions";>Suggestions</a></li>
</ul>
</header>
<div class="home">
<marquee>New Video coming soon!</marquee>
<h1>Home</h1>
<p class="left-side-text";>Hello welcome to my site you guys know me already Recht A.K.A Domo. Here you can find my video upload schedule, previous video, current video, and you can make suggestions on what games I play.</p>
<hr>
<div class="flex-box">
<div class="main-content-column-left";>
<div class="content-left";>
<h2 class="left-side-text";>Previous Video (As of Jun-29-16):</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/bDXMLKNPUGw" frameborder="0" allowfullscreen></iframe>
<h2 class="left-side-text";>Random Content</h2>
<p class="left-side-text";>Lorem ipsum dolor sit amet, sale labore in mea. Eirmod deleniti probatus ne quo, nec cu graeci appellantur, latine denique usu ea. Pri nonumes quaerendum cu. Tollit possim accommodare ei vel, ne augue ludus constituto sea. Mel summo scripta omittantur ad, cum ei zril quaeque definiebas.</p>
<h2 class="left-side-text";>Random Content</h2>
<P class="left-side-text";>Aliquam vitae dui ac dui pellentesque blandit. Proin consectetur, ipsum sed elementum bibendum, diam odio lacinia purus, nec finibus nisi libero et dolor. Aenean congue et libero in venenatis. Aliquam elit metus, semper a aliquam non, ornare nec metus. Sed eget volutpat ipsum, ut ornare nulla. Nulla facilisi.</P>
</div>
<div class="content-left">
<h3>Upload Schedule:</h3>
<ol>
<li id="schedule">Mondays: Upload</li>
<li id="schedule">Tuesday: Upload</li>
<li id="schedule">Wendsday: Upload</li>
<li id="schedule">Thurday: Break</li>
<li id="schedule">Friday: Upload</li>
<li id="schedule">Saturday: Production</li>
<li id="schedule">Sunday: Production</li>
</ol>
<p></P>
</div>
</div>
<div class="sidebar-column-right">
<div class="content-right">
<h2 class="rightside">Im a side bar</h2>
<hr>
<a class="twitter-timeline" data-lang="en" data-width="350" data-height="400" href="https://twitter.com/RechtGaming?ref_src=twsrc%5Etfw" data-chrome=" noborders transparent" data-tweet-limit="" data-link-color="#DC143C" data-border-color="#DC143C" data-theme="dark" data-screen-name="RechtGaming" data-show-replies="" data-aria-polite="assertive" > </a> <!-- Thank you for using "TweetsDecoder" <a href="//tweetsdecoder.net"> @TweetsDecoder.COM</a>--> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<h3 class="sidebar-text";>Random Content</h3>
<p class="sidebar-text";>IDonec venenatis facilisis pulvinar. Sed cursus sed velit accumsan porta. Curabitur eu mauris eu ex volutpat vestibulum. Nulla nibh est, laoreet sit amet pellentesque semper, malesuada nec justo. Praesent dapibus id eros vel scelerisque</p>
<h3 class="sidebar-text";>Random Content</h3>
<p class="sidebar-text";>IDonec venenatis facilisis pulvinar. Sed cursus sed velit accumsan porta. Curabitur eu mauris eu ex volutpat vestibulum. Nulla nibh est, laoreet sit amet pellentesque semper, malesuada nec justo. Praesent dapibus id eros vel scelerisque</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>