###前提・実現したいこと
多くホームページで用いられているメガドロップメニューを作りたいのですがうまくいきません。
###発生している問題・エラーメッセージ
とりあえずコンテンツにmouseoverするとメニューがドロップするのですが、コンテンツとドロップされたメニューのちょうど境界部分にカーソルが乗るとドロップされたメニューが消えてしまいます。 どのようにすればよくあるホームページのメガドロップメニューに近づけられるのでしょうか
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> body{ padding: 50px; text-align: center; } #tem{ border: 1px black solid; } #flame{ border: 5px lime solid; } #tem{ margin:0px; } #text,#text1,#text2{ display: none; } .about{ text-align:center; font-size:14px; background-color:#4200B7; color:#fff; width:105px; height:55px; padding-top: 4px; display:inline-block; } .about:hover{ opacity: 0.8 } .drop{ width:700px; height:130px; display: inline-block; background-color: violet; border: 1px blue solid; } .drop1{ width:700px; height:130px; display: inline-block; background-color: orange; border: 1px blue solid; } .drop2{ width:700px; height:130px; display: inline-block; background-color: lime; border: 1px blue solid; } </style> <body> <div id="flame"> <ul id="tem"> <li class="about" onmouseover=drop('text') onmouseout=nones() >コンテンツ</li> <li class="about" onmouseover=drop('text1') onmouseout=nones()>コンテンツ</li> <li class="about" onmouseover=drop('text2') onmouseout=nones()>コンテンツ</li> </ul> <div id=text class="drop" onmouseover=drop('text') onmouseout=nones()> <p>テキスト</p> </div> <div id=text1 class="drop1" onmouseover=drop('text1') onmouseout=nones()> <p>テキスト1</p> </div> <div id=text2 class="drop2" onmouseover=drop('text2') onmouseout=nones()> <p>テキスト2</p> </div> </div> <script> function drop(text){ document.getElementById('text').style.display='none'; document.getElementById('text1').style.display='none'; document.getElementById('text2').style.display='none'; document.getElementById(text).style.display='inline-block'; } function nones(){ document.getElementById('text').style.display='none'; document.getElementById('text1').style.display='none'; document.getElementById('text2').style.display='none'; } </script> </body> </html>
###試したこと
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/24 03:44