右側に設置したドロップダウンメニューをhoverすると右上に移動してしまいます。

右側のメニューを固定したまま、右側にドロップダウンさせたい。

Web作成初心者です。
いろいろなサイトを拝見し、サイト作成に奮闘しています。

90度回転させたメニューを右側に固定させているのですが、
その中のドロップダウンを指示した項目がhoverの際に右斜上にズレてしまいます。
親メニューを動かさないまま、右にドロップダウンさせるには、どうすればよいでしょうか・・・

いろいろなサイトを拝見し、あらゆる方法を試してみたのですが、解決できず、、、
お手数をおかけいたしますが、何かヒントをいただけますと幸いです。

使用ソフトは、Dreamwraverです。

該当のソースコード

CSS
1.glonav{
2    position:fixed; 
3    bottom: 20px;
4    right: 56px;
5    color: var(--c-blk);}
6
7.glonav a:hover { 
8	color: black;}
9
10.glonav-list{
11    display: flex;/
12    flex-direction: column;
13	text-decoration: none;
14}
15
16.glonav-list-item{
17    text-align: center;
18    transform:rotate(90deg);
19}
20
21.glonav-list-item a{
22    display: block;
23    width: 100%;
24    height: 80px;
25    padding: 5px;
26	font-size: 24px; 
27}
28.glonav-list-item img{
29    text-decoration: none;
30    color: var(--c-blk);
31	height: 24px; }
32
33/*↓ドロップダウンの指示↓*/
34
35.glonav-list li li{
36   height: 0;
37    overflow: hidden;
38	transition: .5s;}
39
40.glonav-list li li a {
41    font-size: 20px;	
42}
43.glonav-list li:hover > ul > li {
44 height: 2rem;
45    overflow: visible;
46}
47

HTML
1<nav class="glonav">
2<ul class="glonav-list">
3<li class="glonav-list-item"><a href="#">MENU1</a></li></ul>
4 <ul class="glonav-list">
5  <li class="glonav-list-item"><a href="#">MENU2</a>
6   <ul>
7     <li><a href="#">2nd-menu1</a></li>
8     <li><a href="#">2nd-menu2</a></li>
9  </ul> </li></ul>
10<ul class="glonav-list">
11 <li class="glonav-list-item"><a href="#">MENU3</a></li>
12 <li class="glonav-list-item"><a href="#">MENU4</a></li>

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

回答1件

ベストアンサー

position: absolute; で固定するといいでしょう。

css
1/*↓ドロップダウンの指示↓*/
2
3/* 追加 親メニューの固定 */
4.glonav-list-item {
5  position:relative;
6}
7.glonav-list-item ul {
8  position: absolute;
9  top: 40px;
10}
11/* ここまで */
12
13.glonav-list li > ul > li{
14  height: 0;
15  overflow: hidden;
16  transition: .5s;
17}
18
19.glonav-list li li a {
20  font-size: 20px;
21  width: 120px; /* 子メニューが折り返さないように調整 */
22}
23.glonav-list li:hover > ul > li {
24  height: 2rem;
25  overflow: visible;
26}