a:hover でマウスのカーソルを1つの英語で書かれている要素に載せたら、他の複数の要素にもa:hoverが適用される

a:hoverを使って要素にマウスのカーソルが乗った時に要素の表示を変えるということをしたくて、一応カーソル乗ったら表示が変わったのですが、なぜか英語で書かれている要素にカーソルが触れたら、他の要素にもa:hoverが適用されてしまいます。日本語で書かれている要素にはその要素にしかa:hoverが適用されないのですが、なぜか英語だけ複数の要素に適用されてしまいます。具体的に言えばHTMLの

<li class="menu-item"><a href="index.html">ホーム</a></li> <li class="menu-item"><a href="introduce.html">紹介</a></li> <li class="menu-item"><a href="access.html">access</a></a></li> <li class="menu-item"><a href="contact.html">contact</a></li> と書かれている部分の「ホーム」と「紹介」と書かれている所にカーソルを合わせたら、カーソルを合わせたところにだけa:hoverが適用されますが、「access」、「contact」の部分にカーソルを合わせると、ホーム　紹介　access contact と並んであって、accessにカーソルを合わせたら、「ホーム　紹介　access」とaccessより左側すべてにa:hoverが適用されてしまいます。そして、「contact」にカーソルを合わせたら、「contact」より左全部にa:hoverが適用されてしまいます。なぜか英語で書かれている部分だけこのようになってしまうのですが、原因は何なのでしょうか？ ```ここに言語を入力コード```ここに言語を入力　HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> <link rel ="stylesheet" href="main.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="main.js"></script> </head> <body> <header> <h1 class="title">JAPAN</h1> <nav class="nav"> <ul class="menu-group"> <li class="menu-item"><a href="index.html">ホーム</a></li> <li class="menu-item"><a href="introduce.html">紹介</a></li> <li class="menu-item"><a href="access.html">access</a></a></li> <li class="menu-item"><a href="contact.html">contact</a></li> </ul> </nav> </header> <div class="content"> <div class="bg"></div> <div class="font">～Tourist destinations in Japan～</div> </div> <div id="wrapper"> <div id="main"> <section> <h2>Introduce</h2> <section class="fadeIn"> <h3>1. 北海道　札幌　さっぽろ雪まつり </h3> <div class="point"> <p> さっぽろ雪まつりは、北海道札幌市中央区内の大通公園を始めとする複数の会場で毎年2月上旬に開催される雪と氷の祭典です。雪で作った大小の像や氷像（氷彫刻）などを札幌市中央区内にある繁華街・歓楽街「すすきの」のすすきの会場で展示されています。 </p> <figure> <img src="Sapporo_Yukimatsuri.jpg" alt="さっぽろ雪まつり"> <figcaption>さっぽろ雪まつり</figcaption> </figure> </div> </section> <section class="fadeIn"> <h3>2. 東北　山形　銀山温泉</h3> <div class="point"> <p> 銀山温泉は、山形県尾花沢市にある温泉です。NHK連続テレビ小説「おしん」に舞台になったことや、あのスタジオジブリの名作「千と千尋の神隠し」の特定のモデルではありませんが、舞台が似ているなどで有名な観光地です。 </p> <figure> <img src="Ginzan.jpg" alt="銀山温泉"> <figcaption>山形銀山温泉</figcaption> </figure> </div> </section> <section class="fadeIn"> <h3>3. 関東　神奈川　箱根</h3> <div class="point"> <p> 箱根は、有名な観光スポットがたくさんあり、奈良時代に開湯し、1200年の歴史を持つ「湯本温泉」や、40万年前から続く火山活動で形成された箱根屈指の景勝地「大涌谷」、湖に浮かぶ朱の鳥居が見どころの「箱根神社」などがあります。 </p> <figure> <img src="Hakone.jpg" alt="湯本温泉"> <figcaption>湯本温泉</figcaption> </figure> </div> </section> <section class="fadeIn"> <h3>4. 東海　岐阜　白川郷</h3> <div class="point"> <p> 岐阜県にある白川郷合掌造り集落は、1995年に世界文化遺産に登録されている日本を代表する人気観光地である。田んぼに囲まれた中に茅葺屋根の家が点在する山村の景色は日本人なら1度は訪れてみたい場所です。 </p> <figure> <img src="Shirakawagou.jpg" alt="白川郷"> <figcaption>白川郷</figcaption> </figure> </div> </section> <section class="fadeIn"> <h3>5. 北陸　石川　兼六園</h3> <div class="point"> <p> 兼六園は石川県、金沢市に存在する日本庭園であり、水戸偕楽園、岡山後楽園とならぶ日本三名園の一つと言われています。季節ごとに見所があり、春は桜を眺めながらの散策、冬は黄金色に輝く雪釣りなど1年を通して多くの観光客で賑わっています。 </p> <figure> <img src="Kenrokuen.jpg" alt="兼六園"> <figcaption>兼六園</figcaption> </figure> </div> </section> <section class="fadeIn"> <h3>6. 近畿　京都　清水寺</h3> <div class="point"> <p> 清水寺は京都府京都市東山区清水にある寺院で、平安時代より桜の見所として人気で、境内には約1000本もの桜が植えられているそうです。また、紅葉の季節となると清水寺から見る紅葉はまさに絶景です。 </p> <figure> <img src="Kiyomizudera.jpg" alt="清水寺"> <figcaption>清水寺</figcaption> </figure> </div> </section> <section class="fadeIn"> <h3>7. 中国　広島　厳島神社</h3> <div class="point"> <p> 厳島神社は、海を敷地とした独創的な社殿が特徴で平安時代の寝殿造りの粋を極めた名社です。島全体が世界文化遺産に登録され、日本三景の一つでもあります。また、建造物の多くが、国宝や重要文化財に指定されています。 </p> <figure> <img src="Itsukushima.jpg" alt="厳島神社"> <figcaption>厳島神社</figcaption> </figure> </div> </section> <section class="fadeIn"> <h3>8. 四国　高知県　四国村</h3> <div class="point"> <p>四国村は江戸～大正期の建築物33棟を四国各地から移築した野外博物館で、国や県の重要文化財に指定されている建物もあり当時の生活がうかがえるようたくさんの民具も展示されている。</p> <figure> <img src="Shikokumura.jpg" alt="四国村"> <figcaption>四国村</figcaption> </figure> </div> </section> <section class="fadeIn"> <h3>9. 九州　大分　別府温泉</h3> <div class="point"> <p>大分といえば温泉で、その中でも有名なのが別府にある「別府地獄めぐり」であり、「別府地獄めぐり」の地獄は、地底から沸き出る熱湯、噴気、熱泥が、まるで地獄を連想させるような景色なことからつけられた名称だそうです。</p> <figure> <img src="Beppu.jpg" alt="別府温泉"> <figcaption>別府温泉</figcaption> </figure> </div> </section> </section> </div> </div> <footer> <div id="footer_navi"> <ul> <li><a href="home.html">HOME</a></li> <li><a href="gallery.html">ギャラリー</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> </div> <small>© 2020 KENSUKE.EGUCHI</small> </footer> <script src="main.js"></script> </body> </html> ```ここに言語を入力　CSS ```

　
コード
@charset "UTF-8";

body {
margin: 0;
padding: 0;
color: #333;
font-size: 14px;
}

header {
display: flex;
width: 100%;
height: 50px;
background-color: white;
align-items: center;
position: fixed;
z-index: 1;
box-shadow: 0px 0px 10px;
border-top: 3px solid #2A3132;
}

.title {
margin-right: auto;
margin-top: 20px;
}

.menu-item {
list-style: none;
display: inline-block;
padding: 10px;
margin-right: 30px;
}

.content {
width: 100%;
height: 400px;
min-height: 100vh;
background: #000;

position: relative;
}

.font {
width: 100%;
height: 1.5em;
color: #fff;
font-weight: bold;
font-size: 50px;
text-align: center;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
}