ドロップダウンメニューでのサブメニューの表示について

前提・実現したいこと

メニューボタンにhoverした時にサブメニューを表示させたいのですが、上手くいきません。

メニュー2の項目に、左揃えで一列でテキストが表示されるようにしたいのですが
画像のようになってしまいます。

jQueryなどは使用せず、CSSのみで表示させたいです。

該当のソースコード

html
1<header class="sample01">
2    <ul><!--メニュー全体-->
3        <li>
4            <a href="#">メニュー1</a>
5            <!--<ul>
6                <li><a href="#">→カスタマイズ</a></li>
7            </ul>-->
8        </li><!-- ホームメニュー end -->
9        <li>
10            <a href="#">メニュー2</a>
11            <ul>
12                <li><a href="#">サブメニューサブメニューサブメニュー</a></li>
13                <li><a href="#">サブメニューサブメニューサブメニュー</a></li>
14            </ul>
15        </li><!--ページメニュー end-->
16        <li><a href="#">メニュー3</a></li>
17        <li><a href="#">メニュー4</a></li>
18    </ul>
19</header>

CSS
1 li{
2        list-style: none;
3    }
4    a{
5        text-decoration: none;
6    }
7    
8    header{
9        height: 52px;
10    }
11    ul > li{
12        display: inline-block;
13    }
14    ul > li > a{
15        display: block;
16        padding: 0 16px;
17        font-size: 17px;
18        background: #f7f7f7;
19        height: 52px;
20        line-height: 52px;
21        color: #111111;
22    }
23    ul > li:hover > a{
24        color: #C49029;
25    }
26    .sample01 ul li{
27        position: relative;
28    }
29    
30    ul li ul{
31        position: absolute;
32        top: 52px;
33        left: 0;
34    }
35    ul li ul li{
36        display: block;
37    }
38
39    
40    .sample01 ul li ul{
41        display: none;
42    }
43    .sample01 ul li:hover ul{
44        display: block;
45    }

試したこと

position: relativeを指定する要素の問題かと思い、考え付く限りの要素に入れてみましたが上手くいきませんでした。
初歩的な質問で恐縮ですが、どうぞよろしくお願いいたします。

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

回答1件

ベストアンサー

親とサブメニューと切り分けがしやすく
cssをまとめやすくなるよう
親 ul に class を付けます。

html
1<header class="sample01">
2   <ul class="menu"><!--メニュー全体-->
3
4<!-- 以下変更なし -->

親ul のclassを使ってcssを書き換えます
全部書き換えているので、試してみて下さい

css
1ul{
2    margin: 0;
3    padding: 0;
4} /* 一旦ulの余白をリセットします */
5li{
6    list-style: none;
7}
8a{
9    text-decoration: none;
10}
11li a{
12    display: block;
13    padding: 0 16px;
14    font-size: 17px;
15    background: #f7f7f7;
16    height: 52px;
17    line-height: 52px;
18    color: #111111;
19}
20header{
21    height: 52px;
22}
23
24.menu {} /* ←親メニューの上左右マージンなどが必要ならここに記載 */
25.menu > li{
26    display: inline-block;
27    position: relative;
28}
29.menu > li:hover > a, .menu ul li:hover > a{
30    color: #C49029;
31}
32.menu ul{
33    position: absolute;
34    top: 52px;
35    left: 0;
36    width: 400%; /* 内容に合わせサブメニューの幅を設定 */
37    display: none;
38}
39.menu > li:hover ul{
40    display: block;
41}