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

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

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

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

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

Q&A

解決済

1回答

1407閲覧

IEでメニューバーに不具合が起きてしまいます。

sasaki_0000

総合スコア7

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

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

0グッド

0クリップ

投稿2020/06/04 14:57

編集2020/06/05 00:46

下記のようにコーディングしているのですがIEでチェックしたところ崩れてしまい、Web初心者でコピーアンドペーストで作成していたので直せず困っております。
どのたかお力貸していただけますと幸いです。
よろしくお願い致します。

症状としては以下のような感じです。
・メニューバーが全体的に右側にずれてしまい横幅からはみ出してしまっている。
・下層メニューがマウスオーバーしても開かない。

※追記
メニューバーの右にずれてはみ出してしまうという崩れは直すことができました。
下層メニューが開かない部分に関しては
&:hover div {
display: initial;
}
がIE対応ではないとのことだったので解決方法でみたdisplay: auto;を併記してみたのですが解決しませんでした。

html

1 2<header class="d-none d-lg-block pc-header m-bottom60"> 3 <ul class="tel tel-absolute"> 4 <li class="margin-tel-menu"> 5 <a class="button mr-3" href="#"><i class="far fa-envelope fa-lg fa-fw"></i> お問い合わせ</a> 6 </li> 7 <li> 8 <img src="https://placehold.jp/200x60.png" class="w100"> 9 </li> 10 </ul> 11 <ul class="menu"> 12 <li class="menu-item m-left5 logo-p"> 13 <a><img src="https://placehold.jp/200x150.png" alt="ロゴ" class="w100"></a> 14 </li> 15 <li> 16 17 <span><a href=“#”>ボタン1</a></span> 18 </li> 19 <li> 20 <span><a href=“#">ボタン2</a></span> 21 </li> 22 <li> 23 <span><a href=“#”>ボタン3</a></span> 24 </li> 25 <li> 26 <span><a href="#">ボタン4</a></span> 27 <div class="menu-box"> 28 <ul> 29 <li class="menu-title"> 30 <h2 class="h2-w"> 31 タイトル<br> 32 <span>サブタイトル</span> 33 </h2> 34 </li> 35 <li class="menu-btn"> 36 <a href=“#”>子ボタン1<i class="fas fa-chevron-right"></i></a> 37 </li> 38 </ul> 39 </div> 40 </li> 41 <li> 42 <span><a href=“#”>ボタン5</a></span> 43 <div class="menu-box"> 44 <ul> 45 <li class="menu-title"> 46 <h2 class="h2-w"> 47 タイトル<br> 48 <span>サブタイトル</span> 49 </h2> 50 </li> 51 <li class="menu-btn"> 52 <a href=“#”>子ボタン2<i class="fas fa-chevron-right"></i></a> 53 </li> 54 <li class="menu-btn"> 55 <a href=“#”>子ボタン3<i class="fas fa-chevron-right"></i></a> 56 </li> 57 </ul> 58 </div> 59 </li> 60 <li> 61 <span><a href="#">ボタン6</a></span> 62 <div class="menu-box"> 63 <ul> 64 <li class="menu-title"> 65 <h2 class="h2-w"> 66 タイトル<br> 67 <span>サブタイトル</span> 68 </h2> 69 </li> 70 <li class="menu-btn"> 71 <a href=“#”>子ボタン4<i class="fas fa-chevron-right"></i></a> 72 </li> 73 </ul> 74 </div> 75 </li> 76 </ul> 77</header>

scss

1pc-header { 2position: relative; 3} 4 5.tel { 6display: flex; 7padding: 0; 8justify-content: flex-end; 9margin: 1% 5% 0 0; 10z-index: 20; 11} 12 13.tel-absolute { 14position: absolute; 15right: 0; 16top: 0; 17} 18 19.menu { 20display: flex; 21position: relative; 22padding: 0; 23margin: 0; 24display: flex; 25justify-content: flex-end; 26align-items: flex-end; 27z-index: 10; 28font-size: 0.9em; 29 30li { 31list-style: none; 32 33span { 34display: flex; 35padding: 0.8em; 36 37a{ 38color: #000000; 39text-decoration: none; 40} 41} 42 43&:hover span { 44background-Color: #EA5514; 45color: #ffffff; 46 47a{ 48color: #ffffff; 49} 50} 51 52div { 53display: none; 54position: absolute; 55left: 0px; 56background-Color: #EA5514; 57color: #ffffff; 58width: 100%; 59} 60 61&:hover div { 62display: initial; 63} 64} 65} 66 67.menu-item:first-child{ 68margin-right: auto; 69} 70 71.menu-box{ 72width: 100%; 73padding: 3%; 74 75ul{ 76display: flex; 77align-items: center; 78list-style: none; 79width: 95%; 80 81.menu-title{ 82width: 20%; 83margin: 0 0 0 2%; 84} 85 86.menu-btn{ 87width: 40%; 88margin: 0 2% 0 0; 89 90a{ 91width: 100%; 92display: block; 93position:relative; 94background-color: #fff; 95color: #0F3667; 96padding: 10px; 97text-decoration: none; 98 99&:hover{ 100background-color: #e5e5e5; 101} 102 103i{ 104position:absolute; 105top:50%; 106right:10px; 107margin-top:-0.5em; 108} 109} 110} 111 112} 113} 114 115.m-right5{ 116margin: 0 5% 0 0; 117} 118 119.m-left5{ 120margin: 0 0 0 5%; 121} 122 123.logo-p{ 124padding: 2em 0 0 0; 125text-align: center; 126}

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

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

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

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

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

guest

回答1

0

自己解決

下記のように書き換えたところ直りました
&:hover div {
display: flex;
}

投稿2020/06/05 00:59

sasaki_0000

総合スコア7

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問