ドロップダウンメニューの下層ページの幅を広げたい！

ドロップダウンメニューの子どもの階層の幅が小さく、文字がすべて表示されてくれません。

子どもの階層の幅を横に広げたい！
下記リンクの様に、文字数に見合った幅にしたいです。

html
1<div class="header04">
2			<ul class="gnav">
3				<li>
4					<a class="gnavtitle" href="">Category</a>
5					<ul>
6						<li><a href="">お香</a></li>
7						<li><a href="">キット・セット・サンプル</a></li>
8						<li><a href="">シェービング</a></li>
9						<li><a href="">スキンケア</a></li>
10						<li><a href="">ネイル</a></li>
11					</ul>
12				</li>
13				<li>
14					<a class="gnavtitle" href="">Category</a>
15					<ul>
16						<li><a href="">お香</a></li>
17						<li><a href="">キット・セット・サンプル</a></li>
18						<li><a href="">シェービング</a></li>
19						<li><a href="">スキンケア</a></li>
20						<li><a href="">ネイル</a></li>
21					</ul>
22				</li>
23				<li>
24					<a class="gnavtitle" href="">Category</a>
25					<ul>
26						<li><a href="">お香</a></li>
27						<li><a href="">キット・セット・サンプル</a></li>
28						<li><a href="">シェービング</a></li>
29						<li><a href="">スキンケア</a></li>
30						<li><a href="">ネイル</a></li>
31					</ul>
32				</li>
33				<li>
34					<a class="gnavtitle" href="">Category</a>
35					<ul>
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						<li><a href="">ネイル</a></li>
41					</ul>
42				</li>
43				<li>
44					<a class="gnavtitle" href="">Category</a>
45					<ul>
46						<li><a href="">お香</a></li>
47						<li><a href="">キット・セット・サンプル</a></li>
48						<li><a href="">シェービング</a></li>
49						<li><a href="">スキンケア</a></li>
50						<li><a href="">ネイル</a></li>
51					</ul>
52				</li>
53				<li>
54					<a class="gnavtitle" href="">Category</a>
55					<ul>
56						<li><a href="">お香</a></li>
57						<li><a href="">キット・セット・サンプル</a></li>
58						<li><a href="">シェービング</a></li>
59						<li><a href="">スキンケア</a></li>
60						<li><a href="">ネイル</a></li>
61					</ul>
62				</li>
63			</ul>
64		</div>

css
1.header04{ background: #a4dfc1; display: flex; justify-content: center; align-items: center;height: 50px;}
2.gnav { display: flex; height: 2rem; margin: 0 auto; width: 1000px; padding: 0;}
3.gnav > li {width: 25%;}
4.gnav li { list-style: none; position: relative;}
5.gnav li a { background: #a4dfc1; color: #000; display: block; height: 2rem; line-height: 2rem; text-align: center; text-decoration: none; width: 100%;}
6
7/*子階層以降共通*/
8.gnav li li { height: 0; overflow: hidden; transition: .5s; z-index: 1000;}
9.gnav li li a { border-top: 1px solid #eee; text-align: left; padding-left: 5px;}
10.gnav li:hover > ul > li { height: 2rem; overflow: visible;}
11.gnav .gnavtitle::after { position: absolute;top: 13px; right: 16px;  display: block; width: 5px; height: 5px; content: ""; transform: rotate(45deg); -ms-transform: rotate(45deg); border-right: 1px solid #000; border-bottom: 1px solid #000;}

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

回答1件

ベストアンサー

サンプル

css
1.gnav > li {/* width: 25%; 削除 */}
2.gnav li a { background: #a4dfc1; color: #000; display: block; height: 2rem; line-height: 2rem; text-align: center; text-decoration: none; /* width: 100%; 削除 */}
3.gnav li:hover > ul > li { height: 2rem; overflow: visible; min-width: max-content; /* 追加 */}