実現したいこと
html,cssのみを使用した多重構造のドロップダウンメニューを作成したいです。
細かい要件としては、最初は親要素のみを表示。親要素へマウスオーバーでその下の子要素を親要素の下に表示、子要素にマウスオーバーで孫要素を表示。という感じです。
親1,子1_2にマウスオーバーした場合、下記のような表示になるようにしたいです。
・親1
・子1_1
・子1_2
・孫1_2_1
・孫1_2_2
・親2
発生している問題・分からないこと
こちらのサイトを参考に、マウスオーバーすると子要素を親要素の下に表示することはできたのですが、孫、ひ孫要素をマウスオーバーで表示できません。
修正箇所のご教授お願い致します。
該当のソースコード
html
1<style>2*{3 box-sizing: border-box;4 margin: 0;5 padding: 0;6}7body{8 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#99e379+0,7db9e8+100 */9 background: #fff; /* Old browsers */10 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99e379', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */11 font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;12 font-size: 16px;13}14.container{15 padding-top: 4rem;16}17.title{18 color: #131212;19 margin-bottom: 2rem;20 text-align: center;21}22.read{23 color: #131212;24 line-height: 1.6;25 margin:0 auto 2rem;26 width: 800px;27}28 29.gnav {30 /*display: flex;*/31 height: 2rem;32 margin: 0 auto;33 width: 1000px;34}35.gnav > li {/*親階層のみ幅を25%にする*/36 width: 25%;37}38/*全てのリスト・リンク共通*/39.gnav li {40 list-style: none;41 position: relative;42}43.gnav li a {44 background: #001b34;45 border-right: 1px solid #eee;46 color: #fff;47 display: block;48 height: 2rem;49 line-height: 2rem;50 text-align: center;51 text-decoration: none;52 width: 100%;53}54/*子階層以降共通*/55.gnav li li {56 height: 0;57 overflow: hidden;58 transition: .5s;59}60.gnav li li a {61 border-top: 1px solid #eee;62}63.gnav li:hover > ul > li {64 height: 2rem;65 overflow: visible;66}67</style>68 69<body>70 <div class="container">71 <h1 class="title">設置店舗一覧</h1>72 <p class="read">73 地区別に設置店舗を絞り込み 74 </p>75 <ul class="gnav">76 <!--親要素-->77 <li><a href="">親要素1</a>78 <ul>79 <!--子要素-->80 <li><a href="">子要素1_1</a>81 <ul>82 <li><a href="">Greatgrandchild1_1</a></li>83 <li><a href="">Greatgrandchild1_2</a></li>84 </ul>85 </li>86 <li><a href="">子要素1_2</a></li>87 <li><a href="">子要素1_3</a></li>88 </ul>89 </li>90 <!--親要素2-->91 <li><a href="">親要素2</a>92 <ul>93 <!--子要素2-->94 <li><a href="">子要素2_1</a></li>95 <ul>96 <li><a href="">Grandchild2_1</a>97 <ul>98 <li><a href="">Greatgrandchild2_1</a></li>99 <li><a href="">Greatgrandchild2_2</a></li>100 </ul>101 </li>102 <li><a href="">Grandchild2_2</a></li>103 </ul>104 <li><a href="">子要素2_2</a></li>105 <li><a href="">子要素2_3</a></li>106 </ul>107 </li>108 </ul>109 </div>110</body>
試したこと・調べたこと
上記の詳細・結果
多重構造のドロップダウンメニューを作成しているコードを探しましたが、孫要素を子要素の下に表示しているコードが見つけられず、要素の横に表示しているものしかありませんでした。
補足
特になし
0 コメント