質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2174閲覧

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

Prune

総合スコア1

hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/20 16:00

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

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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}

投稿2020/09/20 18:10

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Prune

2020/10/12 07:38

遅くなりました! 無事に実装できました。 ほんとうにありがとうございます。勉強になりました・・・!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問