質問: ### 実現したいこと ドロップメニュー(?)を作成したいと考えております。 現状はリンクのページの通りです。 ### 発生している問題 1、まず根本的な問題としてうまく表示されていません。 ・カーソルを合わせなくても初めから中身が見ててしまっている点 →「カーソルを合わせると見える」ようにしたいです。また、カーソルを合わせた時にもう1段下のメニューが見えるようになってしまっているのでそちらも直したいです。 ・カーソルを合わせた際にサブメニューとサブメニューの間に空間ができてしまっている点 →空間がなくなるようにしたいと考えています。 2、位置がおかしい。 位置が約1画面分下に落ちてしまっています。これを、タイトルの直下に置きたいと考えております。 ### 該当のソースコード ``` Title <div align="right"> <img src="//analyzer54.fc2.com/ana/icon.php?uid=2814276&ref=&href=&wid=0&hei=0&col=0" /> </div> Title トップページ お知らせ 最新のメンテナンス情報 その他のお知らせはこちら 学習コンテンツ 国語 申し訳ありませんが現在国語のコンテンツは提供しておりません。 数学 サブサブメニュー3−2−1 サブサブメニュー3−2−2 サブサブメニュー3−2−3 サブサブメニュー3−2−4 英語 サブサブメニュー3−2−1 サブサブメニュー3−2−2 サブサブメニュー3−2−3 サブサブメニュー3−2−4 社会 サブサブメニュー3−1−1 サブサブメニュー3−1−2 サブサブメニュー3−1−3 サブサブメニュー3−1−4 理科 サブサブメニュー3−2−1 サブサブメニュー3−2−2 サブサブメニュー3−2−3 サブサブメニュー3−2−4 メニュー4 サブメニュー サブメニュー サブサブメニュー サブサブメニュー サブサブメニュー サブサブメニュー サブメニュー メニュー5 サブメニュー サブサブメニュー サブサブメニュー サブサブメニュー サブサブメニュー サブサブメニュー サブメニュー サブメニュー サブサブメニュー サブサブメニュー サブサブメニュー サブサブサブメニュー サブサブサブメニュー サブサブサブメニュー サブサブサブメニュー サブサブメニュー 本文 ``` ``` #dropmenu { list-style-type: none; width: 960px; margin: 30px auto 500px; padding: 0; } #dropmenu li { position: relative; width: 20%; float: left; margin: 0; padding: 0; text-align: center; } #dropmenu li a { display: block; margin: 0; padding: 16px 0; background: #8a9b0f; color: #fff; font-size: 14px; font-weight: bold; line-height: 0; text-decoration: none; } #dropmenu li ul { list-style: none; position: absolute; z-index: 100; top: 100%; left: 0; width: 100%; margin: 0; padding: 0; } #dropmenu li ul li { overflow: hidden; width: 100%; height: 14; color: #fff; transition: .2s; } #dropmenu li ul li a { padding: 13px 15px; background: #7c8c0e; text-align: left; font-size: 12px; font-weight: normal; } #dropmenu > li:hover > a { background: #7c8c0e } #dropmenu > li:hover li:hover > a { background: #6e7c0c } #dropmenu > li:hover > ul > li { overflow: visible; height: 38px; } #dropmenu li ul li ul { top: 0; left: 100%; } #dropmenu li:last-child ul li ul { left: -100%; width: 100%; } #dropmenu li ul li ul:before { position: absolute; content: ""; top: 14px; left: -20px; width: 0; height: 0; border: 5px solid transparent; border-left-color: #454e08; } #dropmenu li:last-child ul li ul:before { position: absolute; content: ""; top: 14px; left: 200%; margin-left: -20px; border: 5px solid transparent; border-right-color: #454e08; } #dropmenu li ul li:hover > ul > li { overflow: visible; height: 38px; } #dropmenu li ul li ul li a { background: #616d0b } #dropmenu li:hover ul li ul li a:hover { background: #535d09 } ``` ### 試したこと 初心者のため手つかずといったところです。
回答: 以下のようにすることで、発生している問題はそれぞれ解決すると思います(動作確認用リンク)。 ``` Title トップページ お知らせ 最新のメンテナンス情報 その他のお知らせはこちら 学習コンテンツ 国語 申し訳ありませんが現在国語のコンテンツは提供しておりません。 数学 サブサブメニュー3−2−1 サブサブメニュー3−2−2 サブサブメニュー3−2−3 サブサブメニュー3−2−4 英語 サブサブメニュー3−2−1 サブサブメニュー3−2−2 サブサブメニュー3−2−3 サブサブメニュー3−2−4 社会 サブサブメニュー3−1−1 サブサブメニュー3−1−2 サブサブメニュー3−1−3 サブサブメニュー3−1−4 理科 サブサブメニュー3−2−1 サブサブメニュー3−2−2 サブサブメニュー3−2−3 サブサブメニュー3−2−4 メニュー4 サブメニュー サブメニュー サブサブメニュー サブサブメニュー サブサブメニュー サブサブメニュー サブメニュー メニュー5 サブメニュー サブサブメニュー サブサブメニュー サブサブメニュー サブサブメニュー サブサブメニュー サブメニュー サブメニュー サブサブメニュー サブサブメニュー サブサブメニュー サブサブサブメニュー サブサブサブメニュー サブサブサブメニュー サブサブサブメニュー サブサブメニュー 本文 ``` ``` .container { text-align: center; } #dropmenu { list-style-type: none; width: 960px; margin: 30px auto 500px; padding: 0; } #dropmenu::after { clear: both; content: ""; display: block; } #dropmenu li { position: relative; width: 20%; float: left; margin: 0; padding: 0; text-align: center; } #dropmenu li a { display: block; margin: 0; padding: 16px 0; background: #8a9b0f; color: #fff; font-size: 14px; font-weight: bold; min-height: 5px; text-decoration: none; } #dropmenu li ul { list-style: none; position: absolute; z-index: 100; top: 100%; left: 0; width: 100%; margin: 0; padding: 0; } #dropmenu li ul li { display: none; width: 100%; height: 14; color: #fff; transition: 0.2s; } #dropmenu li ul li a { padding: 13px 15px; background: #7c8c0e; text-align: left; font-size: 12px; font-weight: normal; } #dropmenu > li:hover > a { background: #7c8c0e; } #dropmenu > li:hover li:hover > a { background: #6e7c0c; } #dropmenu > li:hover > ul > li { display: block; height: 38px; } #dropmenu li ul li ul { top: 0; left: 100%; } #dropmenu li:last-child ul li ul { left: -100%; width: 100%; } #dropmenu li ul li ul:before { position: absolute; content: ""; top: 14px; left: -20px; width: 0; height: 0; border: 5px solid transparent; border-left-color: #454e08; } #dropmenu li:last-child ul li ul:before { position: absolute; content: ""; top: 14px; left: 200%; margin-left: -20px; border: 5px solid transparent; border-right-color: #454e08; } #dropmenu li ul li:hover > ul > li { display: block; overflow: visible; height: 38px; } #dropmenu li ul li ul li a { background: #616d0b; } #dropmenu li:hover ul li ul li a:hover { background: #535d09; } ```