ドロップダウンメニューについてです。
メニューボタンを押すと、下ににょきっと出てくるのでは、なく、その横に
ださせるってどうやるのですか。。。
また、追加なんですが、スマホ、タブレットでタップされた場合、
メニューボタンを戻す事できなくなっていました。。
コードは以下の通りです。
html
1 <ul id="normal" class="dropmenu"> 2 <li><a href="https://lagrun123.hateblo.jp/">MENU</a> 3 <ul> 4 <li><a href="https://lagrun123.hateblo.jp/">最新記事</a></li> 5 <li><a href="https://lagrun123.hateblo.jp/entry/2018/06/06/221147">自己紹介</a></li> 6 <li><a href="#">パチンコ記事</a></li> 7 <li><a href="https://lagrun123.hateblo.jp/archive/category/%E3%82%B9%E3%83%AD%E3%83%83%E3%83%88">スロット記事</a></li> 8 </ul> 9 </li> 10 </ul>
CSS
1 2/* <system section="theme" selected="6653586347155924442"> */ 3@import "https://blog.hatena.ne.jp/-/theme/6653586347155924442.css"; 4/* </system> */ 5 6/* <system section="background" selected="pattern-02"> */ 7body{ background-image: url('/images/theme/backgrounds/2014/pattern-02.png'); background-repeat: repeat; background-attachment: fixed; background-position: 0 0; background-size: 40px 70px; } @media (-webkit-min-device-pixel-ratio: 2) { body {background-image: url('/images/theme/backgrounds/2014/pattern-02@2x.png');} } 8/* </system> */ 9/* Responsive: yes */ 10.dropmenu{ 11 *zoom: 1; 12 list-style-type: none; 13 width: 960px; 14 margin: 5px auto 30px; 15 padding: 0; 16} 17.dropmenu:before, .dropmenu:after{ 18 content: ""; 19 display: table; 20} 21.dropmenu:after{ 22 clear: both; 23} 24.dropmenu li{ 25 position: relative; 26 width: 20%; 27 float: left; 28 margin: 0; 29 padding: 0; 30 text-align: center; 31} 32.dropmenu li a{ 33 display: block; 34 margin: 0; 35 padding: 15px 0 11px; 36 background: #8a9b0f; 37 color: #fff; 38 font-size: 14px; 39 line-height: 1; 40 text-decoration: none; 41} 42.dropmenu li ul{ 43 list-style: none; 44 position: absolute; 45 z-index: 9999; 46 top: 100%; 47 left: 0; 48 margin: 0; 49 padding: 0; 50} 51.dropmenu li ul li{ 52 width: 100%; 53} 54.dropmenu li ul li a{ 55 padding: 13px 15px; 56 border-top: 1px solid #7c8c0e; 57 background: #6e7c0c; 58 text-align: left; 59} 60.dropmenu li:hover > a{ 61 background: #6e7c0c; 62} 63.dropmenu li a:hover{ 64 background: #616d0b; 65} 66#normal li ul{ 67 display: none; 68} 69#normal li:hover ul{ 70 display: block; 71}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。