hover時にドロップダウンメニューの横幅を統一したい

前提・実現したいこと

hover時にドロップダウンするメニューの横幅が統一させれていないため、それぞれを合わせたい。

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

hover時にドロップダウンされるメニューの横幅が変わってしまう。

該当のソースコード

-- html --
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ドロップダウンメニュー</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <ul class="menu">
        <li>about</li>
        <li>
          news
          <ul class="menu-sub">
            <li><a href="#">年末年始の営業について</a></li>
            <li><a href="#">新年ご挨拶について</a></li>
          </ul>
        </li>
        <li>
          service
          <ul class="menu-sub">
            <li><a href="#">WEBマーケティング事業 </a></li>
            <li><a href="#">WEB開発事業</a></li>
            <li><a href="#">WEB制作事業</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
-- html --

-- css --
.menu {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  color: #fff;
  padding: 0;
  width: 1200px;
}
.menu li {
  position: relative;
  width: 100%;
  margin-left: 1px;
  padding: 5px 5px 5px 16px;
  background: #444;
}
.menu-sub {
  position: absolute;
  padding: 0;
  margin-left: -17px;
  display: none;
}
.menu-sub li a {
  display: block;
  padding: 5px;
  margin-left: -5px;
  margin-right: 195px;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}
.menu-sub li a:hover {
  background: #272727;
}
-- css --

試したこと

cssにて.menu li aにmargin-right:195px;を指定して調整しようと考えたが、hoverして出てくる要素が変化して、統一できなかった。

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

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

recal

2022/01/21 17:44 編集

1) main.jsが無くてもドロップダウンを再現できますか？ 2) >>hover時にドロップダウンされるメニューの横幅が変わってしまう同じドロップダウンメニューでも横幅がランダムで変化するという事でしょうか？それぞれを合わせたいとありますが、全体で合わせるわけでは無く、それぞれ(それぞれとは？)が合えばいいんでしょうか？具体的にどうなるのが理想ですか？

nao__funky

2022/01/22 05:55

ご返答ありがとうございます。 1)すいません。main.jsは追加するの忘れていました。 2)hoverした時にドロップダウンする仕組みにしたのですが、親要素と子要素が合わなくて困っていました。ドロップダウン時に親要素より子要素の横幅が大きくなっていたので、これを合わせたかったです。・reset.cssを適用していなく、追加、適用し、.menu-sub:100%;を追記したところ解決しました。 main.jsの指摘などありがとうございました。アドバイスを頂く立場なので、質問の際は内容をもっと確認してさせて頂きます。