メガドロップメニューの作り方

###前提・実現したいこと
多くホームページで用いられているメガドロップメニューを作りたいのですがうまくいきません。

###発生している問題・エラーメッセージ

とりあえずコンテンツに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件

ベストアンサー

#temについているborderの1px分、ドロップ部分を上に押し上げてあげましょう。
ネガティブマージンというものを使います。
こうなります。

css
1.drop,
2.drop1,
3.drop2 {
4	margin-top: -1px;
5}

liにマウスオーバーしたときにドロップ部分が出てきます。
borderは#temのものなのでliからマウスアウトしたと判断されて非表示に戻ったんですね。

投稿2016/10/24 02:06

gin

総合スコア2722

abouch

2016/10/24 03:44

回答ありがとうございます。原因がわかってスッキリしました。ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

メガドロップメニューの作り方

関連した質問