メニューの表示がうまくいかない

お手本のようにメニューバーの要素を配置したいのですが、画像のようになってしまい上手くいきません。解決方法を教えてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta name="description" content="課題①-1">
8  <title>課題①-1</title>
9  <link rel="stylesheet" href="style.css">
10  <link rel="stylesheet" href="/sanitize.css">
11</head>
12<body>
13  <header>
14   <div class="menu-bar">
15     <img  id="header-logo" src="img/yEVqXX.png" alt="イチヨンヨンラボ">
16      <nav>
17        <ul id="menu">
18          <li data-japanese="企業情報">
19            <a class="menu-item" href="#">ABOUT</a>
20          </li>
21          <li data-japanese="ニュース">
22            <a class="menu-item" href="#">NEWS</a>
23          </li>
24          <li data-japanese="サービス＆製品情報">
25            <a class="menu-item" href="#"> SERVICE&amp;PRODUCT</a>
26          </li>
27          <li data-japanese="お問い合わせ">
28            <a class="menu-item" href="#">CONTACT</a> 
29          </li>
30        </ul>
31      </nav>
32    </div> 
33    <div class="test"></div>
34  </header>
35
36  <main>
37
38  </main>
39
40  <footer>
41    
42  </footer>
43</body>
44</html>

CSS
1header {
2  background-color: #F2F3F7;
3  top: -176px;
4  left: 150px;
5  width: 100%;
6  height: 799px;
7}
8
9#header-logo {
10  height: 40px;
11}
12
13.test {
14  top: -176px;
15  left: 150px;
16  width: 100%;
17  height: 999px;
18  background: transparent url('img/メインビジュアル.png') 0% 0% no-repeat padding-box;
19  background-position: absolute;
20  position: absolute;
21  z-index: 1;
22}
23
24.menu-bar {
25  top: 59px;
26  left: 150px;
27  width: 975px;
28  height: 77px;
29  box-shadow: 4px 4px 1px #00000029;
30  text-decoration: none;
31  position: absolute;
32  background-color: #FFFFFF;
33  display: flex;
34  z-index: 2;
35}
36
37
38#menu{
39  list-style:none;
40  display:flex;
41  }
42
43#menu li{
44  text-align:center;
45  justify-content: space-around;
46  top: 80px;
47  left: 773px;
48  width: 132px;
49  height: 19px;
50  text-align: left;
51  font: normal normal medium 14px/21px Noto Sans CJK JP;
52  letter-spacing: 0px;
53  color: #000000;
54  }
55
56#menu li:not(:first-child)::before{
57  position:absolute;
58  display:block;
59  content:"|";
60  }
61
62#menu li::after{
63  display:block;
64  content:attr(data-japanese);
65  font-size:0.7em;
66  color: #777777;
67  top: 101px;
68  left: 632px;
69  width: 28px;
70  height: 14px;
71  }
72

m.ts10806

2021/03/03 11:40

「うまくいかない」などで伝わる情報量はゼロなので具体的に起きている現象を記載してください。 https://teratail.com/help/question-tips#questionTips3-4-1

m.ts10806

2021/03/03 11:41

あとHTML見る限りcssが２つあるようですが、１つしか提示されていません。どちらの何ですか？

momo429

2021/03/03 12:20

すみません。現在の自分の画面の状態を表す画像を添付するのを忘れていました。 CSSはstyle.cssのほうです。

meg_

2021/03/03 13:17

2つの画像の違いは何でしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

模写元を参考にすればいいと思いますよ。
https://144lab.com/

css
1#menu li {
2    text-align: center;
3    justify-content: space-around;
4    /*top: 80px;
5    left: 773px;
6    width: 132px; いらない */
7    height: 19px;
8    text-align: left;
9    font: normal normal medium 14px/21px Noto Sans CJK JP;
10    letter-spacing: 0px;
11    color: #000000;
12    position: relative; /*追加*/
13    padding: 0 53px; /*追加*/
14}
15
16#menu li:not(:first-child)::before {
17    position: absolute;
18    display: block;
19    content: "|";
20    left: 0; /*追加*/
21}
22
23#menu li::after {
24    display: block;
25    content: attr(data-japanese);
26    font-size: 0.7em;
27    color: #777777;
28    /*top: 101px;
29    left: 632px;
30    width: 28px;いらない*/
31    height: 14px;
32}