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

前提

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が消えてしまい、うまくいきませんでした。

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

行動規範の内容に同意します

回答2件

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

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

総合スコア3525

yu_6

2019/03/29 05:35

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

行動規範の内容に同意します