HTML,CSS／メニューボタンを横並びにしたいが2列で折り返されてしまう。

Question

前提・実現したいこと

HTML,CSSにてメニューボタンを横並びにしたい。

発生している問題・エラーメッセージ

横2列で折り返されてしまう。
添付が画像の通り。

該当のソースコード

＜HTML＞

<!-- tab-pc用 -->
<div class="container">
  <ul class="Menu">
    <li><a href="#">Menu1</a>
      <ul class="subMenu">
        <li><a href="#">subMenu1</a></li>
        <li><a href="#">subMenu2</a></li>
        <li><a href="#">subMenu3</a></li>
        <li><a href="#">subMenu4</a></li>
      </ul>
    </li>
    <li><a href="#">Menu2</a>
      <ul class="subMenu">
        <li><a href="#">subMenu1</a></li>
        <li><a href="#">subMenu2</a></li>
        <li><a href="#">subMenu3</a></li>
        <li><a href="#">subMenu4</a></li>
        <li><a href="#">subMenu5</a></li>
      </ul>
    </li>
    <li><a href="#">Menu3</a>
      <ul class="subMenu">
        <li><a href="#">subMenu1</a></li>
        <li><a href="#">subMenu2</a></li>
        <li><a href="#">subMenu3</a></li>
        <li><a href="#">subMenu4</a></li>
        <li><a href="#">subMenu5</a></li>
      </ul>
    </li>
    <li><a href="#">Menu4</a> </li>
    <li><a href="#">Menu5</a> </li>
  </ul>
</div>

＜CSS＞
.container{
max-width:1000px;
margin: 0 auto;
padding: 0;
}
.Menu{
width:100%;
margin-top:30px;
}
ul,li{
list-style:none;
margin:0;
padding:0;
}
.Menu li{
float:left;
width:199px;
position:relative;ここで親要素を指定
}
.Menu li a{
background:#ccc;
border-right:1px solid #8c8c8c;
text-align:center;
font-size:14px;
display:block;
padding:10px 0;
text-decoration:none;
color:#fff;
position:relative;/* z-index用のpositionプロパティ /
z-index:100;/ z-indexで前面に表示 */
}
.Menu li:last-child a{
border-right:none;
}

.Menu li ul.subMenu{
position:absolute;
z-index:10;
top: 39px;
opacity: 0;/opacity:0（透過）で非表示にしておく/
width: 0; /widthとheightを0に/
height: 0;
transition: opacity 400ms linear, top 400ms ease-in;/動きをつける/
overflow: hidden;
top: 0;
}

.Menu li:hover ul.subMenu{
opacity: 1;/opacityを1（透過なし）にして表示/
top: 40px;
width:inherit;/inheritでもとの値を継承/
height:inherit;
}

.Menu li ul.subMenu li a{
float:none;
background:#8c8c8c;
border-right:none;
border-bottom:1px solid #ccc;
display:block;
}

.Menu li ul.subMenu li:last-child a{
border:none;
}

試したこと

親要素のcontainerをいじっても横幅が変わりません。
containerのmarginを0にしても2列のまま左寄せになります。
floatを解除すると縦1列に並ぶのでfloatを指定すれば
横に並ぶかと思いましたが2列のままでした。
inline-blockを試しましたが指示する要素が悪いのか
きれいにならびませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[kei344]

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[shun420]

ご指摘ありがとうございました。
内容は解決したのですが見にくい質問でしたね。
申し訳ありません。

次回質問する際はコードブロックで囲むなど見やすい質問にいたします。

[kei344]

ここは「質問への追記・修正の依頼」です。解決済にしても本文を編集することが出来ますので、よろしくお願いします。

Answer 1

width: 199px;と指定しているからだと思われます。
width: calc(100% / 5);などと書き換えると、横2列にはならないはずなので、試してみてください！

.Menu li {
  float: left;
  
  /* width: 199px; */
  width: calc(100% / 5);
  
  position: relative; /*ここで親要素を指定*/
}

Comments

[shun420]

回答ありがとうございました。
今いじろうと思ったら解決しました。

.containerのクラスが別にありそちらの指定が効いてしまっていたので
2列で折り返しとなっておりました。

width: calc(100% / 5);という書き方は知らなかったので
次回より使わせていただきます！