ドロップダウンメニューを表示させようとhoverさせたときに途中で切れてしまう

html
1<header id="header" class="headroom headroom--not-bottom headroom--pinned headroom--top">
2  <div class="header--bg">
3    <div class="header_pc_only">
4      <div class="header--wrapper container">
5        <nav id="gnav--l" class="gnav">
6          <ul>
7            <li><a href="./company.php"><span>会社情報</span><span class="menu_sub">COMPANY</span></a></li>
8            <li><a href="../aaa#a01"><span>事業内容</span><span class="menu_sub">ABOUT</span></a></li>
9            <li><a href="../aaa#a02"><span>社員紹介</span><span class="menu_sub">MEMBER</span></a></li>
10            <li><a href="../aaa"><span>サービス</span><span class="menu_sub">SERVICE</span></a></li>
11          </ul>
12        </nav>
13        <h1 id="logo">
14          <a href="../aaa">
15            <img class="logo" src="assets/img/logo_font.png" alt="aaa">
16          </a>
17        </h1>
18        <nav id="gnav--r" class="gnav">
19          <ul>
20            <li><a href="/support/"><span>福利厚生</span></span><span class="menu_sub">WELFARE</span></a></li>
21            <li><a href="./recruit.php"><span>採用情報</span><span class="menu_sub">RECRUIT</span></a></li>
22            <li><a href="/works/"><span>ニュース</span><span class="menu_sub">NEWS</span></a></li>
23            <li><a href="./contact.php"><span>お問い合わせ</span><span class="menu_sub">CONTACT</span></a>
24              <ul class="sub_ul">
25                <li><a href="#">submenu</a></li>
26                <li><a href="#">submenu</a></li>
27                <li><a href="#">submenu</a></li>
28                <li><a href="#">submenu</a></li>
29              </ul>
30            </li>
31          </ul>
32        </nav>
33      </div>
34    </div>
35  </div>
36</header>

css
1#header {
2    position: sticky;
3    left: 0;
4    top: 0;
5    width: 100%;
6    z-index: 100;
7    background-color: none;
8}
9#header .header--bg {
10    background-color: transparent;
11    -webkit-transition: all .4s cubic-bezier(.19, 1, .22, 1);
12    transition: all .4s cubic-bezier(.19, 1, .22, 1);
13    -webkit-transition-timing-function: cubic-bezier(.19, 1, .22, 1);
14    transition-timing-function: cubic-bezier(.19, 1, .22, 1);
15}
16@media (min-width: 769px){
17.header_pc_only {
18    display: block;
19}
20}
21#header .header--wrapper.container {
22    max-width: 1250px;
23}
24#header .header--wrapper {
25    -webkit-transition: all .4s cubic-bezier(.19, 1, .22, 1);
26    transition: all .4s cubic-bezier(.19, 1, .22, 1);
27    -webkit-transition-timing-function: cubic-bezier(.19, 1, .22, 1);
28    transition-timing-function: cubic-bezier(.19, 1, .22, 1);
29    -webkit-transition-property: background, padding;
30    transition-property: background, padding;
31    display: -webkit-box;
32    display: -ms-flexbox;
33    display: flex;
34    -ms-flex-wrap: wrap;
35    flex-wrap: wrap;
36    padding: 30px 0;
37    position: relative;
38    padding-left: 10px;
39    padding-right: 10px;
40}
41.gnav {
42    -ms-flex-preferred-size: 0;
43    flex-basis: 0;
44    -webkit-box-flex: 1;
45    -ms-flex-positive: 1;
46    flex-grow: 1;
47    -webkit-box-align: center;
48    -ms-flex-align: center;
49    align-items: center;
50}
51#gnav--l ul {
52    -webkit-box-pack: end;
53    -ms-flex-pack: end;
54    justify-content: space-around;
55}
56#gnav--r ul {
57    -webkit-box-pack: end;
58    -ms-flex-pack: end;
59    justify-content: space-around;
60}
61.gnav ul:not(.sub_ul) {
62    list-style: none;
63    padding: 0;
64    margin: 0;
65    display: -webkit-box;
66    display: -ms-flexbox;
67    display: flex;
68    height: 100%;
69    -webkit-box-align: center;
70    -ms-flex-align: center;
71    align-items: flex-end;
72}
73.gnav ul li a {
74    display: block;
75    padding: 0 20px;
76    color: #333;
77    letter-spacing: 1px;
78    font-weight: bold;
79    line-height: 1rem;
80    transform: translateY(0);
81    transition: transform 1s;
82}
83.gnav ul li a span {
84    position: relative;
85    font-size: 1.1rem;
86}
87span.menu_sub {
88    font-size: 5px !important;
89    display: block;
90    text-align: center;
91    padding-top: 5%;
92}
93#header #logo {
94    min-width: 240px;
95    -ms-flex-preferred-size: 240px;
96    flex-basis: 240px;
97    text-align: center;
98    margin: 0;
99    padding: 0;
100    line-height: 100%;
101    font-size: 1px;
102}
103#header #logo a {
104    display: block;
105}
106.container img {
107    max-width: 100%;
108}

ヘッダーの問い合わせメニューの箇所をホバーさせたらドロップダウンメニューがでてくるのですが、
途中で切れてしまう現象が起きてしまいます。

どなたか原因が分かる方教えて頂いてもいいでしょうか。。。

宜しくお願い致します。

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

回答1件

まず、

html
1<li><a href="/support/"><span>福利厚生</span></span><span class="menu_sub">WELFARE</span></a></li>

なのですが福利厚生</span>のあとの</span>は不必要です。

あと、テストしましたが、必要なcssの記述漏れはありませんか？今書かれているコードではとても実現できません。
また、タグにBootstrapとありますがBootstrapを使用するのであればその記述もされていればありがたいです。

投稿2019/11/14 12:35

Res

総合スコア184

nagashima_naoya

2019/11/14 15:03

ご指摘ありがとうございます。コードに漏れがありました。 http://watakuma21.xsrv.jp/clear_test/ 一旦テストでサーバにあげたのでこれで解決ってできそうでしょうか？？やりたい事としては、お問い合わせをホバーしたら画像の上を起点にメニューが表示されて途中で切れることなくクリックできることです。。現在は、ホバーしたら親メニューがずれて画像の上のメニュー部分に表示されます。すみませんがご鞭撻の程よろしくお願いいたします。