亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

<p>A dropdown div element that should work like this in mobile view, but appears as mobile view in the inspect element. </p> <p>I've tried changing the CSS z-index styling of almost all related navigation elements to keep this element at "z-index:121212 !important;", but the dropdown div still appears behind all other navigation links. </p> <p>Does anyone know why this is happening? Any help would be greatly appreciated. </p> <p>This is my HTML code and its CSS: </p> <p> <pre class="brush:css;toolbar:false;"> .navbar-mobile .dropdown>.dropdown-active { display: block; z-index: 121212; } .dropdown-content { display: none; position: absolute; background-color: var(--bg-dark); min-width: 200px; box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2); z-index: 101000; animation: marketNav 0.5s; } .dropdown-content a { color: #fff; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover{ background-color: var(--main-color); color: #000 !important; } .dropdown-content a:hover{ color: #1F586B; } .dropdown:hover .dropdown-content{ display: inline-block; } .nav-pills.has-two .nav-item .nav-link.active { background-color: var(--main-color); color: #000; } .nav-link{ font-weight: 600 !important; letter-spacing: 0.8px; } @media screen and (min-width: 1024px) { .support-link{ margin-right: 10px!important; } .nav-link{ padding-left: 25px!important; } } .nav-pills.has-two .nav-item .nav-link { background-color: #000 !important; color: #fff; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; padding: 12px 20px; }</pre> <pre class="brush:html;toolbar:false;"><!-- Navigation --> <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"> <span> <img class="img-fluid rounded 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"> <ul> <li class="active"> <a class="nav-link" href="index.htm">Home</a> </li> <li class="nav-item"> <div class="dropdown"> <a class="dropbtn nav-link">Market</a> <div class="dropdown-content"> <a href="">Forex</a> <a href="">Cryptocurrencies</a> <a href="">Indices</a> <a href="">Stocks</a> <a href="">Commodities</a> </div> </div> <div class="mobile-view marketNav"> <a href="">Forex</a> <a href="">Cryptocurrencies</a> <a href="">Indices</a> <a href="">Stocks</a> <a href="">Commodities</a> </div> </li> <li class="nav-item"> <div class="dropdown"> <a class="dropbtn nav-link">Trading</a> <div class="dropdown-content"> <a href="">Trading Platforms</a> <a href="">Tools</a> <a href="">Education</a> <a href="">benefits</a> </div> </div> <div class="mobile-view marketNav"> <a class="sub-nav-link" href="">Trading Platforms</a> <a class="sub-nav-link" href="">Tools</a> <a class="sub-nav-link" href="">Education</a> <a class="sub-nav-link" href="">benefits</a> </div> </li> <li> <a class="nav-link" href="">Account Types</a> </li> <li> <a class="nav-link" href="">About</a> </li> <li> <a class="nav-link" href="">Contact</a> </li> <li class="d-md-block d-lg-none d-block "> <a class="nav-link" href="">Login</a> <a class="btn-border-inverse col-12 btn-sm me-3" href="">Register</a> </li> </ul> <i class="bi bi-list mobile-nav-toggle"></i> </nav> <div class="header-right d-flex d-none d-md-none d-lg-block"> <a href="" class="btn-border btn-sm me-3">Login</a> <a href="" class="btn-border-inverse btn-sm me-3">Register</a> </div> </div> </header> <!-- Navigation Ends --></pre> </p> <p><strong>編輯：</strong>我找到了解決這個問題的方法。當鏈接位于主要的“nav-links”后面時，它們無法被點擊。所以我添加了一些高度的空白div，以出現在下拉式內容將出現的nav-link下方，借助一些JS和CSS使其在較大的屏幕上隱藏?，F在我可以點擊“dropdown-content”中的鏈接了。</p>

:root {
  --bg-dark: #000;
  --main-color: #fff;
}