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

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

ただいまの
回答率

92.12%

  • JavaScript

    7181questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    4048questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    2504questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    1811questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    946questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

ドロップダウンメニューを吹き出しのようにしたい

解決済

回答 3

投稿 2016/09/19 23:51 ・編集 2016/09/20 18:27

  • 評価
  • クリップ 0
  • VIEW 309

kotamam0313

score 6

前提・実現したいこと

マウスホバー時に出てくるドロップダウンメニューを吹き出しのようにしたいです。
上に三角がありその下にメニューボックスが現れるようにどうにかできないものでしょうか?
Before、afterでつけようとしたのですが、メニューボックスの中に三角が入ってしまい・・・
どなたかおたすけください><

該当のソースコード

<nav class="main-navi">
            <ul id="main-menu">
              <li><a href="#">メインメニュー1</a></li>
              <li><a href="#">メインメニュー11111</a></li>
              <li><a href="#">メインメニュー1111111</a>
                <ul class="sub-menu triangle">
                  <li><a href="#">サブメニュー222222</a></li>
                  <li><a href="#">サブメニュー222222222222222</a></li>
                  <li><a href="#">サブメニュー222222222</a></li>
                </ul><!-- .sub-menu -->
              </li>
              <li><a href="#">メインメニュー11111</a></li>
              <li><a href="#">メインメニュー1111</a></li>
              <li><a href="#">メインメニュー1</a></li>
              <li><a href="#">メインメニュー111111111</a></li>
            </ul>
          </nav><!-- /.main-navi -->
.main-navi{
  text-align: center;
}
.main-navi ul#main-menu li:nth-child(3){
  position: relative;
}
.main-navi>#main-menu li{
  display: inline-block;
  flex: auto;
  -webkit-flex: auto;
}
.main-navi ul#main-menu ul.sub-menu {
   background-color: #fff; /* サブメニュー全体の背景色 */
   border-width: 2px; /* サブメニュー全体の枠線の太さ */
   border-style: solid; /* サブメニュー全体の枠線の線種 */
   border-color: #72b44a; /* サブメニュー全体の枠線の色 */
   margin: 0px;
   padding: 0px;
   display: none;
   position: absolute;
   left: -30%;
   top: 50px;
 }
.main-navi ul#main-menu ul.sub-menu li{
   width: 250px; /* サブメニュー1項目の横幅 */
   height: 35px; /* サブメニュー1項目の高さ */
   border-width: 0px 0px 1px 0px; /* サブメニュー1項目の枠線の太さ */
   border-style: dotted; /* サブメニュー1項目の枠線の線種 */
   display: block;
}
.main-navi ul#main-menu ul.sub-menu li:last-child{
  border-style: none;
}
.main-navi ul#main-menu ul.sub-menu li a {
   line-height: 35px; /* サブメニュー1項目の行の高さ(「サブメニュー1項目の高さ」と合わせる) */
   text-align: center;  /* サブメニュー1項目の項目名の配置(左寄せ) */
   text-indent: 5px;  /* サブメニュー1項目の項目名前方の余白 */
}
.triangle:before{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 26.0px 15px;
  border-color: transparent transparent #73b44a transparent;
  line-height: 0px;
  _border-color: #000000 #000000 #73b44a #000000;
  _filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
$(function(){
      $("#main-menu li").hover(function(){
         $("ul",this).show();
      },
      function(){
         $("ul",this).hide();
      });
   });


問題点のスクショ
問題点のスクリーンショットです。
背景の白と画像は大元のdivにbackgroundで指定しています!

  • 気になる質問をクリップする

    クリップした質問に回答があった場合に通知・メールを受け取ることができます。

    クリップした質問はマイページの「クリップ」タブからいつでも見ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • kei344

    2016/09/20 00:12

    「</span>」が混ざっていますが、これが正しい形なのでしょうか。

    キャンセル

  • kotamam0313

    2016/09/20 00:20

    間違ってます!!! 修正します!

    キャンセル

回答 3

checkベストアンサー

+4

こちらでいけるかなと思います。

.triangle:before{
  position: absolute; /* 追加 */
  top: -26px; /* 追加 横方向も調整が必要ならrightかleftで */

  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 26.0px 15px;
  border-color: transparent transparent #73b44a transparent;
  line-height: 0px;
  _border-color: #000000 #000000 #73b44a #000000;
  _filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

投稿 2016/09/20 00:43

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2016/09/20 11:55

    回答ありがとうございます。
    指定してみたのですが、存在はしているが見えなくなってしまいます💦

    キャンセル

  • 2016/09/20 11:59

    どういうことでしょう???

    キャンセル

  • 2016/09/20 12:10

    To: kotamam0313さん
    提示されたHTML/CSS/jsでなら、ginさんの書かれたやり方で問題ないとおもうのですが、どのような問題があるかを具体的に(スクリーンショットなど)質問文に追記ください。

    こちらで試しましたが問題ないと思います⇒ https://jsfiddle.net/1L9hgq38/

    キャンセル

  • 2016/09/20 12:47

    kei344さんのを動かしてみて分かりました。
    サブメニューを選ぼうとしたらサブメニューボックスが消えてしまうということですね。
    これはメインとサブの間に隙間があるのでhoverが解除されています。
    その隙間をなくせば動きます。
    どんなデザインになるのか分かりませんが、▲とメインメニューは離さないと思うので。
    デザイン部分をあてるまでは「.main-navi ul#main-menu ul.sub-menu」の「top」を減らしてメインメニューにくっつけておけばいいかなと思います。

    キャンセル

  • 2016/09/20 18:29

    スクリーンショット追加しました!
    このようになってしまって見えなくなるのです...。
    どうにかなりますでしょうか?

    キャンセル

  • 2016/09/20 21:33

    kei344さんが試してくれた例は見られますか?
    見られる場合は上記以外のスタイルが影響しているので検証ツールでチェックしてみてください。
    見られない場合はブラウザなどの問題になりますかね。
    ちなみにWinのchromeでは見られます。

    キャンセル

  • 2016/09/20 21:52

    ありがとうございます!
    kei344さんが試してくれた例はみれています!

    もう一度検証してみます!

    キャンセル

+1

直接の回答ではありませんが、IE6がメインターゲットで無いのであれば _ が先頭に付いた要素は不要です。

.triangle:before{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 26.0px 15px;
  border-color: transparent transparent #73b44a transparent;
  line-height: 0px;
  /* これ以降不要 */
  _border-color: #000000 #000000 #73b44a #000000;
  _filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');
  /* ここまで不要 */
}

【アンダースコアハック - CSS HappyLife】
http://css-happylife.com/archives/2006/0912_1839.php

投稿 2016/09/20 02:55

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2016/09/20 11:52

    ありがとうございます!

    キャンセル

0

html下部に同じクラス名をつけてしまっていて、そこにoverflow:hiddenをつけてしまっていました!
それを解除したらできました!
回答ありがとうございました!

投稿 2016/09/27 15:56

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

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

ただいまの回答率

92.12%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    7181questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    4048questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    2504questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    1811questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    946questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

閲覧数の多いJavaScriptの質問