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

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

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

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

HTML5

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

HTML

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

CSS

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

Q&A

2回答

1444閲覧

(もう少しだけお願いします)CSSのborderが非表示にならない&重なってしまう

yu_6

総合スコア22

CSS3

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

HTML5

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2019/03/28 23:18

編集2022/01/12 10:55

前提

CSSのみでドロップダウンメニューを作っています。

発生している問題

イメージ説明
このように、borderが非表示にならないし、重なってしまいます。

該当のソースコード

JSFiddle
こちらにてデモを作成しました。

scss

1html { 2 font-size: 62.5%; 3} 4 5nav { 6 display: flex; 7 align-items: center; 8 width: 100%; 9 z-index: 30; 10 padding: 2.1rem 4.7rem 6rem 3.5rem; 11 ul { 12 display: flex; 13 align-items: center; 14 flex-wrap: wrap; 15 border: 1px solid #000; 16 } 17 li { 18 height: 4.5rem; 19 font-size: 1.5rem; 20 line-height: 1.5; 21 position: relative; 22 float: left; 23 &:last-child { 24 padding-right: 0; 25 } 26 >a { 27 text-decoration: none; 28 display: block; 29 padding: 1rem 2rem; 30 height: 55%; 31 color: inherit; 32 white-space: nowrap; 33 &:hover { 34 background-color: #1396e2; 35 } 36 } 37 } 38} 39 40/* 子メニュー */ 41nav ul ul { 42 position: absolute; 43 z-index: 100; 44 top: 100%; 45 left: 0; 46 li { 47 overflow: hidden; 48 width: 100%; 49 height: 0; 50 background: white; 51 >a { 52 display: block; 53 color: black; 54 } 55 } 56} 57 58/* ホバーで子メニュー表示 */ 59nav ul li:hover>ul>li { 60 overflow: visible; 61 height: auto; 62} 63 64/* 孫メニュー */ 65nav ul ul ul { 66 top: 0; 67 left: 100%; 68 li { 69 background: black; 70 a { 71 display: block; 72 color: #fff; 73 } 74 } 75} 76 77nav ul li:last-child ul ul { 78 left: -100%; 79} 80 81/* ホバーで孫メニュー表示 */ 82nav>ul>li { 83 >ul>li:hover>ul { 84 display: block; 85 z-index: 200; 86 } 87 &:hover ul>li:hover>a { 88 background: #ff8500; 89 color: #fff; 90 } 91} 92 93/* 孫メニューがある場合左右向き矢印を表示 */ 94nav ul ul li { 95 ul:before { 96 position: absolute; 97 content: ""; 98 top: 16px; 99 left: -20px; 100 width: 0; 101 height: 0; 102 border: 5px solid transparent; 103 border-left-color: #000; 104 } 105 &:hover ul:before { 106 border-left-color: #fff; 107 } 108} 109 110nav ul li:last-child ul li { 111 ul:before { 112 position: absolute; 113 content: ""; 114 top: 16px; 115 left: 200%; 116 margin-left: -20px; 117 border: 5px solid transparent; 118 border-right-color: #000; 119 } 120 &:hover ul:before { 121 border-right-color: #fff; 122 } 123}

試したこと

/* 変更 */印を付けています。(2箇所)
いずれも 0 → -1px に変更

scss

1html { 2 font-size: 62.5%; 3} 4 5nav { 6 display: flex; 7 align-items: center; 8 width: 100%; 9 z-index: 30; 10 padding: 2.1rem 4.7rem 6rem 3.5rem; 11 ul { 12 display: flex; 13 align-items: center; 14 flex-wrap: wrap; 15 border: 1px solid #000; 16 } 17 li { 18 height: 4.5rem; 19 font-size: 1.5rem; 20 line-height: 1.5; 21 position: relative; 22 float: left; 23 &:last-child { 24 padding-right: 0; 25 } 26 >a { 27 text-decoration: none; 28 display: block; 29 padding: 1rem 2rem; 30 height: 55%; 31 color: inherit; 32 white-space: nowrap; 33 &:hover { 34 background-color: #1396e2; 35 } 36 } 37 } 38} 39 40/* 子メニュー */ 41nav ul ul { 42 position: absolute; 43 z-index: 100; 44 top: 100%; 45 left: -1px; /* 変更 */ 46 li { 47 overflow: hidden; 48 width: 100%; 49 height: 0; 50 background: white; 51 >a { 52 display: block; 53 color: black; 54 } 55 } 56} 57 58/* ホバーで子メニュー表示 */ 59nav ul li:hover>ul>li { 60 overflow: visible; 61 height: auto; 62} 63 64/* 孫メニュー */ 65nav ul ul ul { 66 top: -1px; /* 変更 */ 67 left: 100%; 68 li { 69 background: black; 70 a { 71 display: block; 72 color: #fff; 73 } 74 } 75} 76 77nav ul li:last-child ul ul { 78 left: -100%; 79} 80 81/* ホバーで孫メニュー表示 */ 82nav>ul>li { 83 >ul>li:hover>ul { 84 display: block; 85 z-index: 200; 86 } 87 &:hover ul>li:hover>a { 88 background: #ff8500; 89 color: #fff; 90 } 91} 92 93/* 孫メニューがある場合左右向き矢印を表示 */ 94nav ul ul li { 95 ul:before { 96 position: absolute; 97 content: ""; 98 top: 16px; 99 left: -20px; 100 width: 0; 101 height: 0; 102 border: 5px solid transparent; 103 border-left-color: #000; 104 } 105 &:hover ul:before { 106 border-left-color: #fff; 107 } 108} 109 110nav ul li:last-child ul li { 111 ul:before { 112 position: absolute; 113 content: ""; 114 top: 16px; 115 left: 200%; 116 margin-left: -20px; 117 border: 5px solid transparent; 118 border-right-color: #000; 119 } 120 &:hover ul:before { 121 border-right-color: #fff; 122 } 123}

イメージ説明
このように1段ずれが直ったように見えるのですが、ホバーして要素が出てくる際もtop: -1px;になって結局別の場所でずれるので、これは失敗です。

追記

回答下さった方、ありがとうございます。
ホバーしてない時でも余分なborderが出ずすっきりとなり嬉しいです。

イメージ説明

ただ、今はこのように 子/孫メニュー の1つ1つにborderが入ってしまっているのと、孫メニューのborder-topも消えてしまっています。

子/孫メニュー もnavのように「アウトラインの線だけ」にしたいのですが、それは可能なのでしょうか?
border: initial;border-top: initial;などをしてみたのですがborderが消えてしまい、うまくいきませんでした。

もう少し、知恵をお貸し頂けると幸いです…どうぞよろしくお願いします。(__)

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

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

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

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

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

guest

回答2

0

通常時は「削除」しておき、ホバー時のみ「追加」ではどうですか?

CSS

1/* 子メニュー */ 2nav ul ul { 3 border; 0; /* ← 追加 */ 4} 5 6/* ホバーで子メニュー表示 */ 7nav ul li:hover > ul > li { 8 border: solid 1px #000; /* ← 追加 */ 9} 10 11/* ↓ 追加 */ 12nav ul li:hover > ul > li:last-child { 13 border-top: 0; 14} 15

投稿2019/03/29 05:00

yoshinavi

総合スコア3521

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

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

yu_6

2019/03/29 05:35

ありがとうございます。ずれがなくなりました! できれば子メニュー、孫メニューもnavのように「アウトラインの線だけ」にしたいのですが、それは可能なのでしょうか? 下の方のアドバイスから"引き継ぎ"があることを知り、`border: initial;`や`border-top: initial;`などをしてみたのですがborderが消えてしまい、うまくいきませんでした。
guest

0

nav ul ulのところにnav ulのCSS、border: 1px solid #000;が引き継がれて表示されて重なっていますよ

投稿2019/03/29 02:54

TONGARI

総合スコア184

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

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

yu_6

2019/03/29 03:47 編集

ありがとうございます。 どうすれば直りますか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問