ナビメニューをホバーしたらドロップダウンリストを表示させたい

Question

色々調べてやってみているのですが、うまくいきません。
ご教授いただければ幸いです。
よろしくお願い致します。```ここに言語を入力
コード

<ul class="nav-list">
		<li class="top-nav"><a href="#">****</a></li>
		<li class="top-nav"><a href="#">****</a></li>
		<li>
			<ul>
				<li class="top-nav"><a href="#">****</a></li>
				<li class="top-nav"><a href="#">****</a></li>
				<li class="top-nav"><a href="#">****</a></li>
				<li class="top-nav"><a href="#">****</a></li>
			</ul>
			</li>
			<li class="top-nav"><a href="#">****</a></li>
			<li class="top-nav"><a href="#">****</a></li>
			<li class="top-nav"><a href="#">****</a></li>
		</ul>

CSS
.nav-list{
	padding: 35px 0 5px 0 25px;
	margin-top: 10px;
	margin-bottom: 0.5px;
	display : flex;
	display : -webkit-box;     /* old Android */
	display : -webkit-flex;    /* Safari etc. */
	display : -ms-flexbox;     /* IE10        */
	display: -o-box;      /* Opera */
	display: box;         /* ベンダープレフィックスなし */
	justify-content:center;
	list-style-type:none;
}
.nav-list li a {
  text-decoration: none;
  color: #FFFFFF;
  background-color: #0000FF;
  display: block;
  padding: 5px;
}
.nav-list li:hover a {
  background-color: #000080;
}
.nav-list li:hover ul {
  display: block;
}
.nav-list li ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  display: none;
}
.nav-list li:hover ul{display: block;}
.nav-list li ul a {
  display: block;
  text-decoration: none;
  color: #FFFFFF;
  background-color: #0000FF;
}
.nav-list li ul li:hover a {
  background-color: #008080;
}
.nav-list:after {
  content: "";
  clear: both;
  display: block;
}

Answer 1

HTMLでドロップダウンリスト(リストの入れ子の部分)の親要素の中身がないので、幅0になりホバー出来ない状態になってますね。

現状のHTML（見やすくするために少し修正してます。）

<ul class="nav-list">
  <li class="top-nav"><a href="#">Menu1</a></li>
  <li class="top-nav"><a href="#">Menu2</a></li>
  <li> <!-- ここに何もないので幅0になる -->
    <ul>
      <li class="top-nav"><a href="#">Menu2-1</a></li>
      <li class="top-nav"><a href="#">Menu2-2</a></li>
      <li class="top-nav"><a href="#">Menu2-3</a></li>
      <li class="top-nav"><a href="#">Menu2-4</a></li>
    </ul>
  </li>
  <li class="top-nav"><a href="#">Menu3</a></li>
  <li class="top-nav"><a href="#">Menu4</a></li>
  <li class="top-nav"><a href="#">Menu5</a></li>
</ul>

下記のように Menu2 と同じブロック内に入るようにすればMenu2ホバーでドロップダウンします。

<ul class="nav-list">
  <li class="top-nav"><a href="#">Menu1</a></li>
  <li class="top-nav"><a href="#">Menu2</a>
    <ul>
      <li class="top-nav"><a href="#">Menu2-1</a></li>
      <li class="top-nav"><a href="#">Menu2-2</a></li>
      <li class="top-nav"><a href="#">Menu2-3</a></li>
      <li class="top-nav"><a href="#">Menu2-4</a></li>
    </ul>
  </li>
  <li class="top-nav"><a href="#">Menu3</a></li>
  <li class="top-nav"><a href="#">Menu4</a></li>
  <li class="top-nav"><a href="#">Menu5</a></li>
</ul>

CodePenサンプル

Comments

[let]

ご教授いただきありがとうございます。
教えていただいた通り修正したらダウンリストが表示されました。
ありがとうございます。
ただ、新たな問題がでてしまいまして、メニューバーの下に画像を入れているのですがホバーしたらリストが表示されるため下に移動してしまいます。
画像の上に来るようにできないでしょうか？
重ね重ね申し訳ありません。
よろしくお願い致します。

[let]

別の質問をして失礼いたしました。
無事にダウンリストは作成できました。
ありがとうございました。