ドロップダウンメニューを吹き出しのようにしたい
- 評価
- クリップ 0
- VIEW 876
前提・実現したいこと
マウスホバー時に出てくるドロップダウンメニューを吹き出しのようにしたいです。
上に三角がありその下にメニューボックスが現れるようにどうにかできないものでしょうか?
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();
});
});
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
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');
}
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+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
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
html下部に同じクラス名をつけてしまっていて、そこにoverflow:hiddenをつけてしまっていました!
それを解除したらできました!
回答ありがとうございました!
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 91.05%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kei344
2016/09/20 00:12
「</span>」が混ざっていますが、これが正しい形なのでしょうか。
kotamam0313
2016/09/20 00:20
間違ってます!!! 修正します!