플렉스 박스가 연속적으로 표시되지 않습니다

Question

플렉스 박스를 사용하여 드롭 다운 메뉴를 만들었습니다. 어떤 이유로 든 li이 기본적으로 행 대신에 표시됩니다. 나는 심지어 flex-driection: row;을 사용하여 그것을 선언하려했지만 여전히 아무것도 바뀌지 않았다. 열이되고 싶은 탐색 바의 유일한 부분은 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>