<p>モバイル ビューではこのように動作するドロップダウン div 要素ですが、inspect 要素ではモバイル ビューとして表示されます。 </p>
<p>ほぼすべての関連ナビゲーション要素の CSS z-index スタイルを変更して、この要素を「z-index:121212 ! important;」に維持しようとしましたが、ドロップダウン div は依然として他のすべてのナビゲーション リンクの背後に表示されます。 </p>
<p>なぜこれが起こっているのか知っている人はいますか?ご協力をいただければ幸いです。 </p>
<p>これは私の HTML コードとその CSS です: </p>
<p>
<pre class="brush:css;toolbar:false;"> .navbar-mobile .dropdown>.dropdown-active {
表示ブロック;
z インデックス: 121212;
}
.dropdown-content {
表示: なし。
位置: 絶対;
背景色: var(--bg-dark);
最小幅: 200px;
ボックスシャドウ: 0px 10px 10px 0px rgba(0,0,0,0.2);
z インデックス: 101000;
アニメーション:marketNav 0.5秒;
}
.dropdown-content a {
色: #fff;
パディング: 12px 16px;
テキスト装飾: なし。
表示ブロック;
}
.dropdown-content a:hover{
背景色: var(--main-color);
色: #000 !重要;
}
.dropdown-content a:hover{
カラー: #1F586B;
}
.dropdown:ホバー .dropdown-content{
表示: インラインブロック;
}
.nav-pills.has-two .nav-item .nav-link.active {
背景色: var(--main-color);
色: #000;
}
.nav-link{
フォントの太さ: 600 !重要;
文字間隔: 0.8px;
}
@media screen and (min-width: 1024px) {
.サポートリンク{
マージン右: 10px!重要;
}
.nav-link{
パディング左: 25px!重要;
}
}
.nav-pills.has-two .nav-item .nav-link {
背景色: #000 !重要;
色: #fff;
境界半径: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
パディング: 12px 20px;
}</pre>
<pre class="brush:html;toolbar:false;"><!-- ナビゲーション -->
<header id="header" class="fixed-top ">
<div class="container d-flex align-items-center justify-content-lg-between">
<div class="logo me-auto me-lg-0">
<a href="index.htm">
<スパン>
<img class="img-fluidrounded sm-device-img text-align" src="asset/theme1/images/logo/logo.svg" width="100%" alt="pp">
</span>
</a>
</div>
<nav id="navbar" class="navbar order-last order-lg-0">
<li class="アクティブ">
<a class="nav-link" href="index.htm">ホーム</a>
</li>
<li class="nav-item">
<div class="ドロップダウン">
<a class="dropbtn nav-link">マーケット</a>
<div class="ドロップダウンコンテンツ">
<a href="">外国為替</a>
<a href="">暗号通貨</a>
<a href="">インデックス</a>
<a href="">株式</a>
<a href="">商品</a>
</div>
</div>
<div class="モバイルビューマーケットナビ">
<a href="">外国為替</a>
<a href="">暗号通貨</a>
<a href="">インデックス</a>
<a href="">株式</a>
<a href="">商品</a>
</div>
</li>
<li class="nav-item">
<div class="ドロップダウン">
<a class="dropbtn nav-link">取引</a>
<div class="ドロップダウンコンテンツ">
<a href="">取引プラットフォーム</a>
<a href="">ツール</a>
<a href="">教育</a>
<a href="">特典</a>
</div>
</div>
<div class="モバイルビューマーケットナビ">
<a class="sub-nav-link" href="">取引プラットフォーム</a>
<a class="sub-nav-link" href="">ツール</a>
<a class="sub-nav-link" href="">教育</a>
<a class="sub-nav-link" href="">特典</a>
</div>
</li>
- ;
<a class="nav-link" href="">アカウントの種類</a>
</li>
- ;
<a class="nav-link" href="">概要</a>
</li>
- ;
<a class="nav-link" href="">連絡先</a>
</li>
<li class="d-md-block d-lg-none d-block ">
<a class="nav-link" href="">ログイン</a>
<a class="btn-border-inversecol-12 btn-sm me-3" href="">登録</a>
</li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</ナビ>
<div class="header-right d-flex d-none d-md-none d-lg-block">
<a href="" class="btn-border btn-sm me-3">ログイン</a>
<a href="" class="btn-border-inverse btn-sm me-3">登録</a>
</div>
</div>
</ヘッダー>
<!-- ナビゲーション終了 --></pre>
</p>
<p> <strong> 空白: </strong> 私たちは、この問題を解決する方法を発見しました。主要な「ナビリンク」の後に接続されている場合、それらはポイントされなくなります。 div は、JS および CSS を使用して、ナビゲーション リンクの下に表示される「ドロップダウン コンテンツ」を表示します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
問題は Z インデックスではなく、背景色です。透明なので他の文字の後ろに隠れて見えます。コードで使用する変数を設定する必要があります:
リーリー