HTMLのリストを用いてアコーディオンメニューを作成したい

実現したいこと

HTMLのリストタグを用いてアコーディオンメニューを作成したい

前提

HTML・CSSを用いてHPを作成しています。
ヘッダー部分に横並びのメニューを作っており、それぞれのメニュー表示には画像を使用しています。
このうちの1つにのみ、クリックした時に他のページに遷移せずに、
他のメニューリストが出てくるようなアコーディオンメニューを作成したいです。

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

真ん中の画像に入れ子でリストを追加したところ、
これまで横並びになっていたメニューが、真ん中の画像で改行されてしまいます。

該当のソースコード

HTML
1<ul id="mainMenu">
2  <li>
3    <a href="/">
4      <img src="'" alt="">
5    </a>
6  </li>
7  <li>
8    <a href="/test">
9      <img src="'" alt="">
10    </a>
11  </li>
12  <li>
13    <details>
14      <summary><img src="'" alt=""></summary>
15      <ul id="sub_menu_2">
16        <li><a href="/">test1</a></li>
17        <li><a href="/">test2</a></li>
18        <li><a href="/">test3</a></li>
19        <li><a href="/">test4</a></li>
20        <li><a href="/">test5</a></li>
21      </ul>
22    </details>
23  </li>
24  <li>
25    <a href="/test2">
26      <img src="'" alt="">
27    </a>
28  </li>
29  <li>
30    <a href="/test3">
31      <img src="'" alt="">
32    </a>
33  </li>
34  <li>
35    <a href="/test4">
36      <img src="'" alt="">
37    </a>
38  </li>
39</ul>

CSS
1ul#mainMenu {
2  width: 960px;
3  margin: 0 auto;
4  padding: 0;
5  z-index: 2;
6  max-width: 100%
7}
8ul#mainMenu li {
9  margin: 0px;
10  padding: 0px;
11  list-style-type: none;
12  display: inline;
13}

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

回答1件

ベストアンサー

inline で横並びにしてますが、details も inline にする必要があります。
> で子要素のみに限定しておかないと、サブメニューのリストも横並びになります。(それが想定ならいいですが)
サブメニューのリストが開くと、メニュー全体の高さもそれに合わせて増えてしまうので、position: absoluteで他に影響しないようにするといいでしょう。(これもそれが想定なら不要ですが)

以上を考慮して、下記でどうでしょう。

css
1ul#mainMenu {
2  width: 960px;
3  margin: 0 auto;
4  padding: 0;
5  z-index: 2;
6  max-width: 100%;
7}
8ul#mainMenu > li {
9  margin: 0px;
10  padding: 0px;
11  list-style-type: none;
12  display: inline;
13}
14ul#mainMenu > li > details {
15  position: relative;
16  display: inline;
17}
18ul#mainMenu > li > details > ul {
19  position: absolute;
20}