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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

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

HTML5

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

JavaScript

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

HTML

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

CSS

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

Q&A

解決済

3回答

5808閲覧

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

kotamam0313

総合スコア12

CSS3

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

HTML5

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

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2016/09/19 14:51

編集2016/09/20 09:27

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

###該当のソースコード

html

1 <nav class="main-navi"> 2 <ul id="main-menu"> 3 <li><a href="#">メインメニュー1</a></li> 4 <li><a href="#">メインメニュー11111</a></li> 5 <li><a href="#">メインメニュー1111111</a> 6 <ul class="sub-menu triangle"> 7 <li><a href="#">サブメニュー222222</a></li> 8 <li><a href="#">サブメニュー222222222222222</a></li> 9 <li><a href="#">サブメニュー222222222</a></li> 10 </ul><!-- .sub-menu --> 11 </li> 12 <li><a href="#">メインメニュー11111</a></li> 13 <li><a href="#">メインメニュー1111</a></li> 14 <li><a href="#">メインメニュー1</a></li> 15 <li><a href="#">メインメニュー111111111</a></li> 16 </ul> 17 </nav><!-- /.main-navi --> 18

css

1.main-navi{ 2 text-align: center; 3} 4.main-navi ul#main-menu li:nth-child(3){ 5 position: relative; 6} 7.main-navi>#main-menu li{ 8 display: inline-block; 9 flex: auto; 10 -webkit-flex: auto; 11} 12.main-navi ul#main-menu ul.sub-menu { 13 background-color: #fff; /* サブメニュー全体の背景色 */ 14 border-width: 2px; /* サブメニュー全体の枠線の太さ */ 15 border-style: solid; /* サブメニュー全体の枠線の線種 */ 16 border-color: #72b44a; /* サブメニュー全体の枠線の色 */ 17 margin: 0px; 18 padding: 0px; 19 display: none; 20 position: absolute; 21 left: -30%; 22 top: 50px; 23 } 24.main-navi ul#main-menu ul.sub-menu li{ 25 width: 250px; /* サブメニュー1項目の横幅 */ 26 height: 35px; /* サブメニュー1項目の高さ */ 27 border-width: 0px 0px 1px 0px; /* サブメニュー1項目の枠線の太さ */ 28 border-style: dotted; /* サブメニュー1項目の枠線の線種 */ 29 display: block; 30} 31.main-navi ul#main-menu ul.sub-menu li:last-child{ 32 border-style: none; 33} 34.main-navi ul#main-menu ul.sub-menu li a { 35 line-height: 35px; /* サブメニュー1項目の行の高さ(「サブメニュー1項目の高さ」と合わせる) */ 36 text-align: center; /* サブメニュー1項目の項目名の配置(左寄せ) */ 37 text-indent: 5px; /* サブメニュー1項目の項目名前方の余白 */ 38} 39.triangle:before{ 40 content: ""; 41 width: 0; 42 height: 0; 43 border-style: solid; 44 border-width: 0 15px 26.0px 15px; 45 border-color: transparent transparent #73b44a transparent; 46 line-height: 0px; 47 _border-color: #000000 #000000 #73b44a #000000; 48 _filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000'); 49} 50

javascript

1$(function(){ 2 $("#main-menu li").hover(function(){ 3 $("ul",this).show(); 4 }, 5 function(){ 6 $("ul",this).hide(); 7 }); 8 }); 9

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

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

クリップした質問は、後からいつでもMYページで確認できます。

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/09/19 15:12

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

2016/09/19 15:20

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

回答3

0

ベストアンサー

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

css

1.triangle:before{ 2 position: absolute; /* 追加 */ 3 top: -26px; /* 追加 横方向も調整が必要ならrightかleftで */ 4 5 content: ""; 6 width: 0; 7 height: 0; 8 border-style: solid; 9 border-width: 0 15px 26.0px 15px; 10 border-color: transparent transparent #73b44a transparent; 11 line-height: 0px; 12 _border-color: #000000 #000000 #73b44a #000000; 13 _filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000'); 14}

投稿2016/09/19 15:43

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kotamam0313

2016/09/20 02:55

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

2016/09/20 02:59

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

2016/09/20 03:10

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

2016/09/20 03:47

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

2016/09/20 09:29

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

2016/09/20 12:33

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

2016/09/20 12:52

ありがとうございます! kei344さんが試してくれた例はみれています! もう一度検証してみます!
guest

0

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

CSS

1.triangle:before{ 2 content: ""; 3 width: 0; 4 height: 0; 5 border-style: solid; 6 border-width: 0 15px 26.0px 15px; 7 border-color: transparent transparent #73b44a transparent; 8 line-height: 0px; 9 /* これ以降不要 */ 10 _border-color: #000000 #000000 #73b44a #000000; 11 _filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000'); 12 /* ここまで不要 */ 13}

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

投稿2016/09/19 17:55

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kotamam0313

2016/09/20 02:52

ありがとうございます!
guest

0

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

投稿2016/09/27 06:56

kotamam0313

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問