メガドロップダウンメニューで任意で最初に表示した状態にしたい

前提・実現したいこと

はじめまして。お世話になります。
メガドロップダウンメニューで初期状態で一つ表示されている状態にしたいです。
最初にアクセスした状態では表示されているものはもちろんリンクなどを触れる状態です。
他のメニューや範囲外にカーソルが行った時には消えるという動作は可能でしょうか？
宜しくお願い致します。

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

エラーメッセージ

該当のソースコード

HTML

<body> <header class="l-header"> <nav class="l-gnav"> <ul class="l-gnav-lv1"> <li class="l-gnav-lv1__item"> <a href="" class="l-gnav-lv1__link">ナビA</a> <ul class="l-gnav-lv2"> <li class="l-gnav-lv2__item"> <a href="" class="l-gnav-lv2__link">ナビゲーションA-1</a> </li> <li class="l-gnav-lv2__item"> <a href="" class="l-gnav-lv2__link">ナビゲーションA-2</a> </li> <li class="l-gnav-lv2__item"> <a href="" class="l-gnav-lv2__link">ナビゲーションA-3</a> </li> </ul> </li> <li class="l-gnav-lv1__item"> <a href="" class="l-gnav-lv1__link">ナビB</a> <ul class="l-gnav-lv2"> <li class="l-gnav-lv2__item"> <a href="" class="l-gnav-lv2__link">ナビゲーションB-1</a> </li> <li class="l-gnav-lv2__item"> <a href="" class="l-gnav-lv2__link">ナビゲーションB-2</a> </li> <li class="l-gnav-lv2__item"> <a href="" class="l-gnav-lv2__link">ナビゲーションB-3</a> </li> </ul> </li> <li class="l-gnav-lv1__item"> <a href="" class="l-gnav-lv1__link">ナビC</a> <ul class="l-gnav-lv2"> <li class="l-gnav-lv2__item"> <a href="" class="l-gnav-lv2__link">ナビゲーションC-1</a> </li> <li class="l-gnav-lv2__item"> <a href="" class="l-gnav-lv2__link">ナビゲーションC-2</a> </li> <li class="l-gnav-lv2__item"> <a href="" class="l-gnav-lv2__link">ナビゲーションC-3</a> </li> </ul> </li> </ul> </nav> </header> <div class="back"><a href="http://cly7796.net/wp/css/responding-to-switching-of-mega-drop-down-menu/">「メガドロップダウンメニューでメニューがうまく切り替えられない不具合の対応」の記事ページへ戻る</a></div> </body>

CSS
body {
margin: 0;
padding: 0;
}
.back {
position: fixed;
bottom: 10px;
right: 10px;
}
ul {
margin: 0;
padding-left: 0;
}
li {
list-style: none;
}

.l-gnav-lv1 {
position: relative;
height: 54px;
text-align: center;
background: #E74C3C;
font-size: 0;
}
.l-gnav-lv1__item {
display: inline-block;
font-size: 16px;
}
.l-gnav-lv1__link {
display: block;
padding: 15px 20px;
background: #2ECC71;
}
.l-gnav-lv2 {
position: absolute;
top: 54px;
left: 0;
width: 100%;
padding: 30px 0;
background: #3498DB;
opacity: 0;
visibility: hidden;
transition: opacity 2000ms, visibility 2000ms;
}
.l-gnav-lv1__item:hover .l-gnav-lv2 {
opacity: 1;
visibility: visible;
}
.l-gnav-lv2__item {
display: inline-block;
margin: 0 20px;
}
.l-gnav-lv2__link {
display: block;
padding: 5px;
}

試したこと

http://cly7796.net/wp/sample/responding-to-switching-of-mega-drop-down-menu/
このデモを元にしていますが、CSSのdisplayやopacityをいじってみましたが、実現できませんでした。
Scriptもわかりません。

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

ここにより詳細な情報を記載してください。

s8_chu

2018/09/28 09:02

質問者さんが記述したHTML, CSSのコードをすべて載せていただけませんか？

s8_chu

2018/09/28 09:18 編集

もうひとつ教えていただきたいのですが、JavaScriptは使用しても構いませんか？

next-21

2018/09/28 09:21

問題ありません。必要であればJqueryなどでも大丈夫です。

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

回答1件

ベストアンサー

CSSだけでは難しいので、JavaScriptを使います。
質問文から、「最初から表示されているメニュー」が消える条件は、

他のメニューにマウスがホバーしたとき
範囲外にカーソルが行った時

となっています。2つ目の条件については、よくわからなかったので、1つ目の条件だけを考えます。

「最初から表示されているメニュー」には、本来非表示にされているものを表示された状態にしておくためのスタイルが設定されているはずです。なので、「最初から表示されているメニュー」以外のメニューにマウスがホバーしたときに、そのスタイルを削除すれば、質問者さんが実現したいことが出来るとわかります。今回の場合、以下のようにすれば良いと思いますが、いかがでしょうか？

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        body {
8            margin: 0;
9            padding: 0;
10        }
11
12        ul {
13            margin: 0;
14            padding-left: 0;
15        }
16
17        li {
18            list-style: none;
19        }
20
21        .l-gnav-lv1 {
22            position: relative;
23            height: 54px;
24            text-align: center;
25            background: #E74C3C;
26            font-size: 0;
27        }
28
29        .l-gnav-lv1item {
30            display: inline-block;
31            font-size: 16px;
32        }
33
34        .l-gnav-lv1link {
35            display: block;
36            padding: 15px 20px;
37            background: #2ECC71;
38        }
39
40        .l-gnav-lv2 {
41            position: absolute;
42            top: 54px;
43            left: 0;
44            width: 100%;
45            padding: 30px 0;
46            background: #3498DB;
47            opacity: 0;
48            visibility: hidden;
49            transition: opacity 2000ms, visibility 2000ms;
50        }
51
52        .l-gnav-lv1item:hover .l-gnav-lv2 {
53            opacity: 1;
54            visibility: visible;
55        }
56
57        .l-gnav-lv2item {
58            display: inline-block;
59            margin: 0 20px;
60        }
61
62        /* 追加ここから */
63        .active-item .l-gnav-lv2 {
64            opacity: 1;
65            visibility: visible;
66        }
67        /* 追加ここまで */
68    </style>
69</head>
70<body>
71<header class="l-header">
72    <nav class="l-gnav">
73        <ul class="l-gnav-lv1">
74            <li class="l-gnav-lv1item active-item"><!-- クラス名を追加 --><a href="" class="l-gnav-lv1link">ナビA</a>
75                <ul class="l-gnav-lv2">
76                    <li class="l-gnav-lv2item"><a href="" class="l-gnav-lv2link">ナビゲーションA-1</a>
77                    </li>
78                    <li class="l-gnav-lv2item"><a href="" class="l-gnav-lv2link">ナビゲーションA-2</a>
79                    </li>
80                    <li class="l-gnav-lv2item"><a href="" class="l-gnav-lv2link">ナビゲーションA-3</a>
81                    </li>
82                </ul>
83            </li>
84            <li class="l-gnav-lv1item"><a href="" class="l-gnav-lv1link">ナビB</a>
85                <ul class="l-gnav-lv2">
86                    <li class="l-gnav-lv2item"><a href="" class="l-gnav-lv2link">ナビゲーションB-1</a>
87                    </li>
88                    <li class="l-gnav-lv2item"><a href="" class="l-gnav-lv2link">ナビゲーションB-2</a>
89                    </li>
90                    <li class="l-gnav-lv2item"><a href="" class="l-gnav-lv2link">ナビゲーションB-3</a>
91                    </li>
92                </ul>
93            </li>
94            <li class="l-gnav-lv1item"><a href="" class="l-gnav-lv1link">ナビC</a>
95                <ul class="l-gnav-lv2">
96                    <li class="l-gnav-lv2item"><a href="" class="l-gnav-lv2link">ナビゲーションC-1</a>
97                    </li>
98                    <li class="l-gnav-lv2item"><a href="" class="l-gnav-lv2link">ナビゲーションC-2</a>
99                    </li>
100                    <li class="l-gnav-lv2item"><a href="" class="l-gnav-lv2link">ナビゲーションC-3</a>
101                    </li>
102                </ul>
103            </li>
104        </ul>
105    </nav>
106</header>
107<script>
108    [...document.querySelectorAll(".l-gnav-lv1item:not(.active-item)")].forEach(element => { // 追加
109        element.addEventListener("mouseover", () => {
110            document.querySelector(".l-gnav-lv1item.active-item").classList.remove("active-item");
111        }, false);
112    });
113</script>
114</body>
115</html>