リストがヘッダー内に重複して表示される

前提・実現したいこと

webサイト制作学習のため、以下のサイトをHTML&CSSのみで模写しています。
javascriptプラグインもできるだけ使わないで完成させたいと思っています。
etherscan.io

このサイトのヘッダー部分は、各項目にマウスをポイントすると、サブメニューが
リスト形式で展開されます。
しかし、私が実装すると展開部分がヘッダー枠内に重複して表示され、うまく展開されません。

元のサイトのソースコードを見て、<ul>タグの入れ子構造になっているのは分かったのですが、
megamenu.jsなどのプラグインを使って実装しているようで、HTML&CSSのみで実装している
のではないみたいです。

以下が、私が作成したコードです。

HTML
1<body id="body">
2<div id="header-div">
3    <header id="header">
4        <a href="/">
5            <img id="logo-header" src="images/index_eth/logo-ether.png">
6        </a>
7        <ul class="gnav" id="header-list">
8            <li>
9                <a class="font-size-1 under-line-none gnav" href="/">Home</a>
10            </li>
11            <li id="subMenuList">
12                <a class="font-size-1 under-line-none has-sub-menu" href="">Blockchain</a>
13                <ul>
14                    <li>test</li>
15                    <li>test</li>
16                    <li>test</li>
17                </ul>
18            </li>
19        </ul>
20    </header>
21</div>
22</body>

CSS
1#body {
2    box-sizing: border-box;
3    display: block;
4    margin: 0 auto;
5    background-color: #f8f9fa;
6}
7
8#header-div {
9    width: 1920px;
10    height: 44.578px;
11    background-color: #ffffff;
12}
13
14#header {
15    margin: 0 332.5px;
16    width: 1255px;
17    height: 44.59px;
18    box-sizing: border-box;
19    display: flex;
20    background-color: #ffffff;
21}
22
23#logo-header {
24    width: 160px;
25    height: 35.938px;
26    margin-top: 5px;
27}
28
29#header-list {
30    list-style: none;
31    vertical-align: center;
32    margin-left: 908.158px;
33    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
34    box-sizing: border-box;
35    align-items: center;
36    padding-right: 16px;
37    display: flex;
38}
39
40#header-list li li {
41    height: 0;
42    overflow: hidden;
43    transition: .5s;
44    list-style: none;
45    z-index: 1;
46}
47
48#header-list li:hover > ul > li {
49    overflow: visible;
50}
51
52a {
53    color: #6e777f;
54}
55
56a:hover {
57    color: #3799db;
58}
59
60.font-size-1 {
61    font-size: 16px;
62}
63
64.under-line-none {
65    text-decoration: none;
66}
67
68#subMenuList {
69    margin-left: 10px;
70    padding: 0 16px;
71}

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

上記HTMLコードの<li>test<li>×３の部分がうまく展開されません。

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

OS:mac os 10.14.6
IDE:IntelliJ 2019.3.4
ブラウザ:chrome 80.0.3987.149 (Official Build) (64-bit)

###その他
実際の現場だと、javascriptプラグインは自由に使えない場合もあると考えて、できるだけHTML&CSSのみで
学習しながら実装しようとしていますが、最近はPCやスマートフォンも高性能化してきているので、このような
制約はあまり考えなくても問題ないのでしょうか？
できれば、で構いませんのでこちらの疑問にもアドバイスいただけるとありがたいです。

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

回答2件

ベストアンサー

下記のような感じでしょうか。

いろいろ弄ったので、どこを修正したから元のコードと見比べてください。
余白とかサイズは適当ですので、ご希望にあるように調整してください。

css
1#header-list {
2  list-style: none;
3  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
4  box-sizing: border-box;
5  padding-right: 16px;
6  display: flex;
7  align-items: top;
8  height: 1.5rem;
9}
10
11#header-list li li {
12  height: 0;
13  width: 100%;
14  overflow: hidden;
15  transition: .5s;
16  list-style: none;
17  z-index: 1;
18}
19#subMenuList > ul {
20  display: block;
21  padding-top: 1rem;
22  padding-left: 5px;
23  width: 100%;
24  background-color: #ffffff;
25}
26
27#subMenuList:hover > ul > li {
28  height: 2rem;
29  display: block;
30  overflow: visible;
31}

投稿2020/04/07 04:36

hatena19

総合スコア33715

pierogi.user

2020/04/10 02:59

ありがとうございます。上手く行きました。

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

HTML
1<li id="subMenuList">
2    <a class="font-size-1 under-line-none has-sub-menu" href="">Blockchain</a>
3    <ul>
4        <li>test</li>
5        <li>test</li>
6        <li>test</li>
7    </ul>
8</li>

<li id="subMenuList">~</li>で囲んでいるからダメなのかもしれません。