画像のようなメニューを作りたいのですが思った形にならず困っています

下記のURLを参考にしながら画像のようなメニューを作りたいと思っているのですが、メニューの横にロゴを入れようとするとメガメニューの横幅が100％にならなくなってしまったり、上のボタンの位置がずれてしまったりします。
http://kachibito.net/snippets/responsive-megamenu

個人で最近ウェブサイトを作り始めたばかりなのでわからない事も多いのですが教えていただけますと幸いです。

HTML
1<header>
2    <div class="menu-container">
3        <div class="menu">
4            <ul>
5                <li><a href="#">ボタン1</a></li>
6                <li><a href="#">ボタン2</a></li>
7                <li><a href="#">ボタン3</a></li>
8                <li><a href="#">ボタン4</a>
9                    <ul>
10                        <li>
11                            <ul>
12                                <li><a href="#">メニュー</a></li>
13                            </ul>
14                        </li>
15                    </ul>
16                </li>
17                <li><a href="#">ボタン5</a>
18                    <ul>
19                        <li>
20                            <ul>
21                                <li><a href="#">ボタン6</a></li>
22                            </ul>
23                        </li>
24                        <li>
25                            <ul>
26                                <li><a href="#">ボタン7</a></li>
27                            </ul>
28                        </li>
29                    </ul>
30                </li>
31                <li><a href="#">ボタン8</a>
32                </li>
33                <li><a href="#">ボタン9</a>
34                    <ul>
35                        <li>
36                            <ul>
37                                <li><a href="#">メニュー</a></li>
38                            </ul>
39                        </li>
40                    </ul>
41                </li>
42            </ul>
43        </div>
44    </div>
45</header>

css
1.menu-container {
2    width: 100%;
3    margin: 0 auto;
4  }
5
6  .menu-mobile {
7    display: none;
8    padding: 20px;
9  }
10  .menu-mobile:after {
11    content: "\f394";/*モバイル用メニューに表示するアイコン*/
12    font-family: "Ionicons";
13    font-size: 2.5rem;
14    padding: 0;
15    float: right;
16    position: relative;
17    top: 50%;
18    -webkit-transform: translateY(-25%);
19            transform: translateY(-25%);
20  }
21  .menu-dropdown-icon:before {
22    content: "\f489";/*モバイル用メニューに表示するアイコン*/
23    font-family: "Ionicons";
24    display: none;
25    cursor: pointer;
26    float: right;
27    padding: 1.5em 2em;
28    background: #fff;
29    color: #000;
30  }
31  .menu > ul {
32    margin: 0 auto;
33    width: 100%;
34    list-style: none;
35    padding: 0;
36    position: relative;
37    box-sizing: border-box;
38    text-align:right;
39  }
40  .menu > ul:before,
41  .menu > ul:after {
42    content: "";
43    display: table;
44  }
45  .menu > ul:after {
46    clear: both;
47  }
48  .menu > ul > li {
49    float: left;
50    background: #fff;
51    padding: 0;
52    margin: 0;
53    display:inline;
54  }
55  .menu > ul > li a {
56    text-decoration: none;
57    padding: 1.5em 3em;
58    display: block;
59    color: #000;
60  }
61  .menu > ul > li:hover {
62    background: #EA5514;
63  }
64  .menu > ul > li a:hover {
65    color: #fff;
66  }
67  .menu > ul > li > ul {
68    display: none;
69    width: 100%;
70    background: #EA5514;
71    padding: 20px;
72    position: absolute;
73    z-index: 99;
74    left: 0;
75    margin: 0;
76    list-style: none;
77    box-sizing: border-box;
78  }
79  .menu > ul > li > ul:before,
80  .menu > ul > li > ul:after {
81    content: "";
82    display: table;
83  }
84  .menu > ul > li > ul:after {
85    clear: both;
86  }
87  .menu > ul > li > ul > li {
88    margin: 0;
89    padding-bottom: 0;
90    list-style: none;
91    width: 25%;
92    background: none;
93    float: left;
94  }
95  .menu > ul > li > ul > li a {
96    color: #fff;
97    padding: .2em 0;
98    width: 95%;
99    display: block;
100    border-bottom: 1px solid #ccc;
101  }
102  .menu > ul > li > ul > li > ul {
103    display: block;
104    padding: 0;
105    margin: 10px 0 0;
106    list-style: none;
107    box-sizing: border-box;
108  }
109  .menu > ul > li > ul > li > ul:before,
110  .menu > ul > li > ul > li > ul:after {
111    content: "";
112    display: table;
113  }
114  .menu > ul > li > ul > li > ul:after {
115    clear: both;
116  }
117  .menu > ul > li > ul > li > ul > li {
118    float: left;
119    width: 100%;
120    padding: 10px 0;
121    margin: 0;
122    font-size: .8em;
123  }
124  .menu > ul > li > ul > li > ul > li a {
125    border: 0;
126  }
127  .menu > ul > li > ul.normal-sub {
128    width: 300px;
129    left: auto;
130    padding: 10px 20px;
131  }
132  .menu > ul > li > ul.normal-sub > li {
133    width: 100%;
134  }
135  .menu > ul > li > ul.normal-sub > li a {
136    border: 0;
137    padding: 1em 0;
138  }
139  /* ––––––––––––––––––––––––––––––––––––––––––––––––––
140  モバイル用
141  –––––––––––––––––––––––––––––––––––––––––––––––––– */
142  /*サイズは任意で。js側の設定と合わせる*/
143  @media only screen and (max-width: 959px) {
144    .menu-container {
145      width: 100%;
146    }
147    .menu-mobile {
148      display: block;
149    }
150    .menu-dropdown-icon:before {
151      display: block;
152    }
153    .menu > ul {
154      display: none;
155    }
156    .menu > ul > li {
157      width: 100%;
158      float: none;
159      display: block;
160    }
161    .menu > ul > li a {
162      padding: 1.5em;
163      width: 100%;
164      display: block;
165    }
166    .menu > ul > li > ul {
167      position: relative;
168    }
169    .menu > ul > li > ul.normal-sub {
170      width: 100%;
171    }
172    .menu > ul > li > ul > li {
173      float: none;
174      width: 100%;
175      margin-top: 20px;
176    }
177    .menu > ul > li > ul > li:first-child {
178      margin: 0;
179    }
180    .menu > ul > li > ul > li > ul {
181      position: relative;
182    }
183    .menu > ul > li > ul > li > ul > li {
184      float: none;
185    }
186    .menu .show-on-mobile {
187      display: block;
188    }
189  }

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

ブートストラップを使っています。

okina

2020/05/15 05:18

現状のCSSやhtmlを提示してください。

sasaki_0000

2020/05/15 05:47

ごちゃごちゃになってしまい初期状態に戻してしまっていたのでほぼサイトに乗っているものと一緒になってしまうのですが追記致しました。よろしくお願い致します。

yambejp

2020/05/15 05:51

マウスを載せたとき（hover）で間違いないのですか？選択状態を保持したいときはクリックしたときとかにしますが・・・

sasaki_0000

2020/05/15 05:54

hoverで間違えないです…！よくわかっていなくて伝わりずらい表現になってしまい申し訳ありません。

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

回答2件

以下のようにしてみるといかがでしょうか?

HTML側は、ulとliの階層が1つ不要な気がします。

HTML
1<header>
2  <div class="menu-container">
3    <div class="menu">
4      <ul>
5        <li><a href="#">ボタン1</a></li>
6        <li><a href="#">ボタン2</a></li>
7        <li><a href="#">ボタン3</a></li>
8        <li><a href="#">ボタン4</a>
9          <ul>
10            <li><a href="#">メニュー</a></li>
11          </ul>
12        </li>
13        <li><a href="#">ボタン5</a>
14          <ul>
15            <li><a href="#">ボタン6</a></li>
16            <li><a href="#">ボタン7</a></li>
17          </ul>
18        </li>
19        <li><a href="#">ボタン8</a>
20        </li>
21        <li><a href="#">ボタン9</a>
22          <ul>
23            <li><a href="#">メニュー</a></li>
24          </ul>
25        </li>
26      </ul>
27    </div>
28  </div>
29</header>

CSSは以下のような形だといかがでしょうか?

CSS
1.menu-container {
2  width: 100%;
3  margin: 0 auto;
4}
5
6.menu-mobile {
7  display: none;
8  padding: 20px;
9}
10.menu-mobile:after {
11  content: "\f394"; /*モバイル用メニューに表示するアイコン*/
12  font-family: "Ionicons";
13  font-size: 2.5rem;
14  padding: 0;
15  float: right;
16  position: relative;
17  top: 50%;
18  -webkit-transform: translateY(-25%);
19  transform: translateY(-25%);
20}
21.menu-dropdown-icon:before {
22  content: "\f489"; /*モバイル用メニューに表示するアイコン*/
23  font-family: "Ionicons";
24  display: none;
25  cursor: pointer;
26  float: right;
27  padding: 1.5em 2em;
28  background: #fff;
29  color: #000;
30}
31.menu > ul {
32  margin: 0 auto;
33  width: 100%;
34  list-style: none;
35  padding: 0;
36  position: relative;
37  box-sizing: border-box;
38  text-align: right;
39}
40.menu > ul:before,
41.menu > ul:after {
42  content: "";
43  display: table;
44}
45.menu > ul:after {
46  clear: both;
47}
48.menu > ul > li {
49  float: left;
50  background: #fff;
51  padding: 0;
52  margin: 0;
53  display: inline;
54}
55.menu > ul > li a {
56  text-decoration: none;
57  padding: 1.5em 3em;
58  display: block;
59  color: #000;
60}
61.menu > ul > li:hover {
62  background: #ea5514;
63}
64.menu > ul > li a:hover {
65  color: #fff;
66}
67
68/* 追加 */
69.menu {
70  position: relative;
71}
72.menu > ul > li:not(:hover) > ul {
73  display: none;
74}
75.menu > ul > li > ul {
76  display: flex;
77  background: #ea5514;
78  position: absolute;
79  top: 68px; /* 調整してください */
80  left: 0;
81  right: 0;
82}
83.menu > ul > li > ul > li {
84  display: block;
85}
86
87
88/* コメントアウト */
89/*
90.menu > ul > li > ul {
91  display: none;
92  width: 100%;
93  background: #ea5514;
94  padding: 20px;
95  position: absolute;
96  z-index: 99;
97  left: 0;
98  margin: 0;
99  list-style: none;
100  box-sizing: border-box;
101}
102.menu > ul > li > ul:before,
103.menu > ul > li > ul:after {
104  content: "";
105  display: table;
106}
107.menu > ul > li > ul:after {
108  clear: both;
109}
110.menu > ul > li > ul > li {
111  margin: 0;
112  padding-bottom: 0;
113  list-style: none;
114  width: 25%;
115  background: none;
116  float: left;
117}
118.menu > ul > li > ul > li a {
119  color: #fff;
120  padding: 0.2em 0;
121  width: 95%;
122  display: block;
123  border-bottom: 1px solid #ccc;
124}
125.menu > ul > li > ul > li > ul {
126  display: block;
127  padding: 0;
128  margin: 10px 0 0;
129  list-style: none;
130  box-sizing: border-box;
131}
132.menu > ul > li > ul > li > ul:before,
133.menu > ul > li > ul > li > ul:after {
134  content: "";
135  display: table;
136}
137.menu > ul > li > ul > li > ul:after {
138  clear: both;
139}
140.menu > ul > li > ul > li > ul > li {
141  float: left;
142  width: 100%;
143  padding: 10px 0;
144  margin: 0;
145  font-size: 0.8em;
146}
147.menu > ul > li > ul > li > ul > li a {
148  border: 0;
149}
150.menu > ul > li > ul.normal-sub {
151  width: 300px;
152  left: auto;
153  padding: 10px 20px;
154}
155.menu > ul > li > ul.normal-sub > li {
156  width: 100%;
157}
158.menu > ul > li > ul.normal-sub > li a {
159  border: 0;
160  padding: 1em 0;
161}
162*/
163/* ––––––––––––––––––––––––––––––––––––––––––––––––––
164  モバイル用
165  –––––––––––––––––––––––––––––––––––––––––––––––––– */

モバイル用の記述は省略しました。

投稿2020/05/15 07:27

編集2020/05/15 07:30

new1ro

総合スコア4528

sasaki_0000

2020/05/15 07:57

ご回答ありがとうございます！先ほど実装してみたのですが子メニューが入っていないボタンの上にマウスオーバーしたところ他のボタンの子メニューが表示されたままになってしまうのですがこれは私の環境の問題でしょうか？

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

ベストアンサー

hoverで処理する場合は、メニューとコンテンツが親子関係にないと
難しいでしょう

投稿2020/05/15 05:56

yambejp

総合スコア116724

sasaki_0000

2020/05/15 06:00

つまりこの参考サイトにのっているメニューバーだとそもそも画像のような見せ方にするのは難しいという事でしょうか？その場合これなら出来そうなど参考になるもの教えていただけますと幸いです…！

yambejp

2020/05/15 06:11 編集

たとえばこんな感じ？ <style> ul{display:flex;position:relative;padding:0px;} li {list-style:none} li span{display:flex} li:hover span{background-Color:lime;} li div{display:none;position:absolute;left:0px;background-Color:lime;width:100%;} li:hover div{display:initial} </style> <ul> <li><span>ボタン1</span> <div>コンテンツ1</div> </li> <li><span>ボタン2</span> <div>コンテンツ2</div> </li> <li><span>ボタン3</span> <div>コンテンツ3</div> </li> </ul>

sasaki_0000

2020/05/15 07:54

こんなにスッキリしたコードで見た目が再現できてびっくりしました…！ありがとうございます。ちなみに質問ばかりで大変申し訳ないですがスマホ時にハンバーガーメニューにする方法ってありますか？もしご存知でしたら教えていただけますと幸いです。

yambejp

2020/05/15 08:00

widthを見て隠しておいたハンバーガーメニューを表示するとかその手の処理が簡単だと思います

sasaki_0000

2020/05/15 08:46

なるほど！ありがとうございます。やってみます。

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

あなたの回答