フレックスボックスが行に表示されない

Question

フレックスボックスを使用してドロップダウンメニューを作成したが、何らかの理由でliがデフォルトで行に表示される。私もflex-driection: row;を使って宣言しようとしましたが、何も変わりませんでした。私が欲しいnav-barの唯一の部分は、sub-navのコンテンツです。

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; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
} 
 

 
.nav-bar li { 
 
    position: relative; 
 
    margin: 5px 8px; 
 
    flex: 1; 
 
} 
 

 
.sub-nav { 
 
    display: none; 
 
    overflow: hidden; 
 
    margin-top: -13px; 
 
    font-size: .8em; 
 
    background: black; 
 
} 
 

 
li:hover>.sub-nav { 
 
    display: block; 
 
} 
 

 
.sub-nav li { 
 
    border-bottom: solid 1px #DC143C; 
 
} 
 

 
.nav-bar a { 
 
    border: 2px solid black; 
 
    background-color: black; 
 
    text-decoration: none; 
 
    flex: 1; 
 
    text-align: center; 
 
    padding: 10px; 
 
    color: #DC143C; 
 
    font-size: 2em; 
 
    font-weight: bold; 
 
    font-family: TransFormers; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.nav-bar a:active { 
 
    text-decoration: underline !important; 
 
} 
 

 
.footer { 
 
    border-color: #DC143C; 
 
    background-color: #DC143C; 
 
    color: black; 
 
}

<div id="container"> 
 
    <header> 
 

 
    <nav role="navigation" class="nav-bar"> 
 

 
     <ul class "nav-bar"> 
 
     <li><a href="index.html" ;>Home</a></li> 
 
     <li><a href="#" ;>Shop</a> 
 
      <ul class="sub-nav"> 
 
      <li><a href="shirts.html" ;>Shirts</a></li> 
 
      <li><a href="shirts.html" ;>Shirts</a></li> 
 
      <li><a href="shirts.html" ;>Shirts</a></li> 
 
      <li><a href="shirts.html" ;>Shirts</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#archives" ;>Archives</a></li> 
 
     <li><a href="#suggestions" ;>Suggestions</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</div>

Answer 1

=記号は<ul class "nav-bar">

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; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
} 
 

 
.nav-bar li { 
 
    position: relative; 
 
    margin: 5px 8px; 
 
    flex: 1; 
 
} 
 

 
.sub-nav { 
 
    display: none; 
 
    overflow: hidden; 
 
    margin-top: -13px; 
 
    font-size: .8em; 
 
    background: black; 
 
} 
 

 
li:hover>.sub-nav { 
 
    display: block; 
 
} 
 

 
.sub-nav li { 
 
    border-bottom: solid 1px #DC143C; 
 
} 
 

 
.nav-bar a { 
 
    border: 2px solid black; 
 
    background-color: black; 
 
    text-decoration: none; 
 
    flex: 1; 
 
    text-align: center; 
 
    padding: 10px; 
 
    color: #DC143C; 
 
    font-size: 2em; 
 
    font-weight: bold; 
 
    font-family: TransFormers; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.nav-bar a:active { 
 
    text-decoration: underline !important; 
 
} 
 

 
.footer { 
 
    border-color: #DC143C; 
 
    background-color: #DC143C; 
 
    color: black; 
 
}

<div id="container"> 
 
    <header> 
 

 
    <nav role="navigation" class="nav-bar"> 
 

 
     <ul class="nav-bar"> 
 
     <li><a href="index.html" ;>Home</a></li> 
 
     <li><a href="#" ;>Shop</a> 
 
      <ul class="sub-nav"> 
 
      <li><a href="shirts.html" ;>Shirts</a></li> 
 
      <li><a href="shirts.html" ;>Shirts</a></li> 
 
      <li><a href="shirts.html" ;>Shirts</a></li> 
 
      <li><a href="shirts.html" ;>Shirts</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#archives" ;>Archives</a></li> 
 
     <li><a href="#suggestions" ;>Suggestions</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</div>