ヘッダーのナビのリンクがリンク先をクリックしても飛びません。
状況としては下記です。
●ヘッダーをfixedで固定して、スクロールしてもつねに上部にあるようにしている
●ナビにはjQueryを設定して、クリックするとドロップダウンするようにしている
●ヘッダーにはZ-indexを設定している
◎試したこと
調べると、z-indexが原因で、リンクが下にあるという記事をみつけたので、
ナビアイテム部分やリンク部分のz-indexをヘッダーよりも大きくしてみましたが、
やはりリンクしませんでした。
ソースは下記です。
▼HTML ナビ部分
<nav class="pc"> <ul class="dropdwn"> <li class="nav-cont"><p>●●について</p> <ul class="dropdwn_menu"> <li><a href="">●●紹介ページ</a></li> <li><a href="">●●オプション紹介</a></li> <li><a href="">●●方法</a></li> <li><a href="">●●事項</a></li> <li><a href="">よくある質問</a></li> </ul> </li> <li class="nav-cont"><a href=""><p>料金</p></a></li> <li class="nav-cont"><a href=""><p>方法</p></a></li> <li class="nav-cont"><a href=""><p>●●方法</p></a></li> <li class="nav-cont"><p>●●サービス</p> <ul class="dropdwn_menu"> <li><a href="">●●●●</a></li> <li><a href=">●●●●</a></li> </ul> </li> </ul> </nav>
▼css
header .dropdwn{ display: flex; position: absolute; z-index: 99; } .dropdwn li{ width: 228px; text-align: center; } .nav-cont p{ padding: 5px 0 7px; border-right: solid 1px #ccc; } .nav-cont p:hover{ border-bottom: solid 2px #328258; } header .dropdwn p:first-child{ border-left: solid 1px #ccc; } .dropdwn_menu{ display: none; background: rgba(245, 245, 245,0.9); z-index: 99; } .dropdwn_menu{ box-shadow: 2px 2px 4px #ccc; z-index: 99; } .dropdwn_menu li{ padding: 8px 0; border-bottom: solid 1px #ccc; } .dropdwn_menu li a{ display: block; } .dropdwn_menu li:hover{ border-bottom: solid 2px #328258; }
▼jQuery
jQuery(function($){ $('.dropdwn li').click(function(){ $(this).children('ul').slideToggle(); return false; }); });
調べてもどうしてもわかりません。。
どこが悪いかどうか教えてください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/18 14:45
2019/11/18 14:59
2019/11/18 15:06
2019/11/18 22:31