はてなブログのデザインで、マウスホバーで反応するプルダウンメニューを作成したいです。

html
1<div id="top-editarea-inner"></div>
2<div id="gnav" class="default-nav">
3 <div class="container">
4  <div class="col12">
5   <nav id="menu">
6    <ul id="menubar" class="global-nav">
7     <li class="header-menu"><a href="#">ニュース</a></li>
8     <li class="header-menu"><a href="#">ブログについて</a></li>
9     <li class="header-menu"><a href="#">ギャラリー</a></li>
10     <li class="header-menu"><a href="#">旅行</a>
11     <ul class="sub-menu">
12        <li><a href="#"></a>A</li>
13        <li><a href="#"></a>B</li>
14        <li><a href="#"></a>C</li>
15        <li><a href="#"></a>D</li>
16     </ul>
17    </li>
18<li class="header-menu"><a href="#">留学</a>
19     <ul class="sub-menu">
20        <li><a href="#"></a></li>
21        <li><a href="#"></a></li>
22        <li><a href="#"></a></li>
23        <li><a href="#"></a></li>
24     </ul>
25    </li>
26<li class="header-menu"><a href="#">中国語</a>
27     <ul class="sub-menu">
28        <li><a href="#"></a></li>
29        <li><a href="#"></a></li>
30        <li><a href="#"></a></li>
31        <li><a href="#"></a></li>
32     </ul>
33    </li>
34    <li class="header-menu"><a href="#">その他</a>
35     <ul class="sub-menu">
36        <li><a href="#"></a></li>
37        <li><a href="#"></a></li>
38        <li><a href="#"></a></li>
39        <li><a href="#"></a></li>
40     </ul>
41    </li>
42    <li class="header-menu"><a href="#">お問い合わせ</a>
43     <ul class="sub-menu">
44        <li><a href="#"></a></li>
45        <li><a href="#"></a></li>
46        <li><a href="#"></a></li>
47        <li><a href="#"></a></li>
48     </ul>
49    </li>
50  </ul>
51 </nav>
52</div>
53</div>
54</div>
55
56</div>
57

css
1/* <system section="theme" selected="26006613389136749"> */
2@import url("https://github.com/Kazuhiro-ch/hateblog/blob/master/.editorconfig");
3/* </system> */
4
5/* <system section="background" selected="pixel-01"> */
6body{ background-image: url('/images/theme/backgrounds/2014/pixel-01.png'); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; background-size: 188px 178px; } @media (-webkit-min-device-pixel-ratio: 2) { body {background-image: url('/images/theme/backgrounds/2014/pixel-01@2x.png');} }
7/* </system> */
8
9#top-title{
10　　display:block;
11    position:relative;
12    padding: 0;
13    color: #000;
14    text-decoration:none;
15    margin:0;
16    bottom:100px;
17    text-align: center;
18    font-family: "游ゴシック";
19    font-weight: 900;
20    margin-top:200px; 
21}
22
23#toptitle{
24    text-align: center;
25    font-size:7rem;
26}
27
28#top-title p{
29     font-size:3rem;
30}
31
32.pickup1 .pickup-link {
33    background-image: url("https://f.hatena.ne.jp/China-tushin/20200701202504");
34}
35.pickup2 .pickup-link {
36    background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/C/China-tushin/20200701/20200701202941.png);
37}
38.pickup3 .pickup-link {
39    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/C/China-tushin/20200701/20200701202534.png");
40}
41
42h2{
43  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
44  color: #494949;/*文字色*/
45  background: #f4f4f4;/*背景色*/
46  border-left: solid 5px #7db4e6;/*左線*/
47  border-bottom: solid 3px #d7d7d7;/*下線*/
48}
49
50h3 {
51  position: relative;
52  padding-left: 25px;
53}
54
55h3:before {
56  position: absolute;
57  content: '';
58  bottom: -3px;
59  left: 0;
60  width: 0;
61  height: 0;
62  border: none;
63  border-left: solid 15px transparent;
64  border-bottom: solid 15px rgb(119, 195, 223);
65}
66
67h3:after {
68  position: absolute;
69  content: '';
70  bottom: -3px;
71  left: 10px;
72  width: 100%;
73  border-bottom: solid 3px rgb(119, 195, 223);
74}
75
76h4 {
77  color: #010079;
78  text-shadow: 0 0 5px white;
79  border-left: solid 7px #010079;
80  background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
81  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
82}
83
84#point {
85  position: relative;
86  background: #f4f4f4;
87  padding: 2px 5px 2px 20px;
88  font-size: 20px;
89  color: #474747;
90  border-radius: 0 10px 10px 0;
91}
92
93#point:before {
94  font-family: "Font Awesome 5 Free";
95  content: "\f041";
96  display: inline-block;
97  line-height: 40px;
98  position: absolute;
99  padding: 0em;
100  color: white;
101  background: #ff6363;
102  font-weight: 900;
103  width: 40px;
104  text-align: center;
105  height: 40px;
106  line-height: 40px;
107  left: -1.35em;
108  top: 50%;
109  -webkit-transform: translateY(-50%);
110  transform: translateY(-50%);
111  border-radius: 50%;
112  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
113}
114
115
116#gnav{
117max-width: 1500px; /* 色を付けているここを記事と同じ巾を指定 */
118margin: 0 auto; /* 中央揃えになるように左右のmarginをautoに */
119background-color: #81b2e2;
120display:block;
121font-size:100%;
122}
123
124.default-nav{
125    position: relative;
126    box-shadow: 0 2px 4px -3px rgba(0,0,0,0.2);
127}
128
129#gnav ul {
130    display: table;
131    width: 100%;
132    table-layout: fixed;
133    text-align:center;
134}
135
136#menu {
137    max-width: 1000px; /* 記事と同じ幅 */
138    margin: 0 auto;
139}
140
141
142ul{
143list-style:none;
144margin: 0;
145padding: 0;
146border: 0;
147outline: 0;
148font-size: 100%;
149vertical-align: baseline;
150background: transparent;
151}
152
153
154#gnav li{
155    display: table-cell;
156    position: relative;
157}
158
159#gnav li a{
160    display:block;
161    position:relative;
162    padding: 0;
163    color: #fff;
164    text-decoration:none;
165    margin:0;
166    text-align: center;
167    font-family: "游ゴシック";
168     font-weight: 900;
169}
170
171#gnav .global-nav >li a{
172    font-size'1.5vww;
173    font-weight: 900;
174    line-height : 2em;
175}
176
177#gnav .global-nav >li a{
178    font-size'1.5vww;
179    line-height : 100em;
180}
181
182#gnav .sub-menu >li a{
183    font-size'1.5vww;
184    line-height : 100em;
185}

css
1.header-menu:hover .sub-menu {
2  display: inline-block;
3}

以上のホバー分を追加したのですが、うまくいきませんでした。
間違っていますか？

css
1#gnav ul {
2    display: table;
3    width: 100%;
4    table-layout: fixed;
5    text-align:center;
6}
7
8#menu {
9    max-width: 1000px; /* 記事と同じ幅 */
10    margin: 0 auto;
11}
12
13ul{
14    list-style:none;
15    margin: 0;
16    padding: 0;
17    border: 0;
18    outline: 0;
19    font-size: 100%;
20    vertical-align: baseline;
21    background: transparent;
22}
23
24
25#gnav li a{
26    display:block;
27    position:relative;
28    padding: 0;
29    color: #fff;
30    text-decoration:none;
31    margin:0;
32    text-align: center;
33    font-family: "游ゴシック";
34    font-weight: 900;
35}
36
37.header-menu{
38    text-align; center;
39    display: table-cell;
40    padding: 0;
41    color: #fff;
42    text-decoration:none;
43    margin:0;
44    font-family: "游ゴシック";
45    font-weight: 900;
46}
47
48#gnav .global-nav >li a{
49    font-size'1.5vww;
50    font-weight: 900;
51    line-height : 2em;
52}
53
54#gnav .global-nav >li a{
55    font-size'1.5vww;
56    line-height : 100em;
57}
58
59#gnav .sub-menu {
60  display: none;
61}
62#gnav .header-menu:hover .sub-menu {
63  display: block;
64  background-color: #c0c0c0;
65}
66
67#gnav .sub-menu >li a{
68    font-size'1.5vww;
69    line-height : 100em;
70}
71

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

回答1件

こんにちは。

そもそも、ホバーする以前から表示されていますので、まず、消すところから始めてみてはいかがでしょうか？

css
1#gnav .sub-menu {
2  display: none;
3}
4#gnav .header-menu:hover .sub-menu {
5  display: inline-block;
6}

投稿2020/07/03 08:38

Lhankor_Mhy

総合スコア36960

退会済みユーザー

2020/07/03 08:55

ありがとうございます。ホバー以前は隠れましたが、サブメニューが横一列に表示されるようです。縦一列にはできませんか？

Lhankor_Mhy

2020/07/03 08:59

display: inline-block; を使っているからだと思いますよ。

退会済みユーザー

2020/07/03 09:06

blockにすればよいというものでもないようですね・・。

Lhankor_Mhy

2020/07/03 09:19

ああ、失礼しました。table-cell になっているのですね。そこを変更すればいいですよ。

退会済みユーザー

2020/07/03 13:14

すみません。言葉数が足りませんでした。ホバー前は横一列のメニューバーは横一列でいいのですが、ホバーしたときに、縦一列でサブメニューを出したいのです。

Lhankor_Mhy

2020/07/03 15:02

はい、理解しています。そのスタイルが効いてしまっている、ということです。

退会済みユーザー

2020/07/03 21:40

cssを以上の変更し、画像のようになりました。水色の部分を固定したいのですが、どうしたらいいですか？

Lhankor_Mhy

2020/07/04 01:19

すみませんが、「水色の部分を固定」というのが、イメージできていません。「固定」とは何の固定でしょう……？　サイズですか？

退会済みユーザー

2020/07/04 07:30

枠というのでしょうか？水色のサイズを現状維持したまま下にメニューを出したいのです。今は水色の部分がメニュー幅分ずれる形で拡大してしまいます。

Lhankor_Mhy

2020/07/07 02:16

うーん、ちょっとよくわからないですね。幅が変わっているように見えませんでしたが……

Lhankor_Mhy

2020/07/07 02:29 編集

あ、もしかして、高さのことかな……？そうだとすると、position: absolute などを使えばいいのでは？いずれにせよ、当初の質問からかなり脱線してるように感じています。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

はてなブログのデザインで、マウスホバーで反応するプルダウンメニューを作成したいです。

関連した質問