導航欄無法正常工作，分辨率較低

出於某種奇怪的原因，使用筆記本電腦或移動設備或甚至低於1080p的分辨率時，導航欄無法正常工作。我無法選擇欄右側的項目。這讓我難倒了。有沒有人有任何想法，爲什麼會這樣？導航欄無法正常工作，分辨率較低

HTML：

<nav> 

     <ul> 
     <li><div hidden id="online"><span hidden></span><span hidden class="usersonline"></span></div></li> 
     <li><a href="index.php">Home</a></li> 
     <li><a href="supportliberty.php">Support Liberty</a></li> 
     <li><a href="share.php">Your KTR Success</a></li> 
     <li><a href="libertyseries.php">Language of Liberty</a></li> 
     <li><a href="#" onclick='window.open("newsletter/newsletter.pdf");return false;'>Newsletter</a></li> 
     <li><a href='#' class="login">Student Login</a> 
     </ul>    

<nav>

CSS：

body { 
margin: 0; 
padding: 0; 
height: 100%; 
} 

nav { 
display:block; 
position: absolute; 
left:0; 
white-space:nowrap; 
margin: 0 auto; 
width: 100%; 
min-width: 900px; 
max-width: 900px; 
background-color:#0D4D8D; 
padding-left: 15%; 
padding-right: 38.1%; 
} 

nav ul { 
display:block; 
margin: 0 auto; 
width: 100%; 
list-style: none; 
display: inline; 
white-space:nowrap; 
} 

nav ul li { 
float: left; 
position: relative; 
white-space:nowrap; 
} 

nav ul li a { 
display: block; 
margin: 0 auto; 
width: auto; 
padding: 0 10px 0 10px; 
font-size: 14px; 
font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif; 
line-height: 44px; 
text-align: center; 
text-decoration: none; 
color:white; 
white-space:nowrap; 
} 

nav ul ul { 
width: 200px; 
position:absolute; 
top:-99999px; 
left:0; 
opacity: 0; 
-webkit-transition: opacity .4s ease-in-out; 
-moz-transition: opacity .4s ease-in-out; 
-o-transition: opacity .4s ease-in-out; 
transition: opacity .4s ease-in-out; 
z-index:497; 
background:#333; 
padding: 2px; 
border:1px solid #444; 
border-top:none; 
box-shadow:#111 0 3px 4px; 
} 


nav ul ul li a { 
display: block; 
width: 200px; 
text-align: left; 
padding-left: 3px; 
font-size: 14px;  
}  

nav ul li:hover>ul{ 
opacity: 1; 
position:absolute; 
top:98%; 
left:0; 
} 

nav ul li a:hover { 
color: #fff; 
background-color: black; 
} 

nav ul li.selected a { 
color: #fff; 
background-color: black; 
}

你可以看到它住在這裏：Center for Self Governance

來源

2016-07-13 Tye Lucas

這是因爲你的「loginModal」的z-index的那麼導航欄 –

#modalForgot是重疊在上面。 – Tushar

#modalForgot上重迭。將top: -100%添加到.modal.fade

來源

2016-07-13 05:23:27 Tushar

謝謝我真的很感謝這次的幫助，我忘記了模態的位置。 :) –

嗨，現在你在你的CSS文件中添加兩個CSS像這樣

將您的.class添加到position: relative;和z-index: 9999;添加您的nav標籤z-index: 99999;像這樣

.class{position: relative; 
    z-index: 9999;} 

nav{z-index: 99999;}

來源

2016-07-13 05:14:30

謝謝大家我很感謝幫助！它的工作現在很棒！ –

@TyeLucas此解決方案僅將導航欄移到頂部。當您滾動一點時，有一些區域在視頻上無法點擊。 – Tushar

嗨，朋友。

試試這個：

HTML

<nav id="menu"> 
<a class="nav-mobile" id="nav-mobile" href="#"></a> 
     <ul> 
     <li><div hidden id="online"><span hidden></span><span hidden class="usersonline"></span></div></li> 
     <li><a href="index.php">Home</a></li> 
     <li><a href="supportliberty.php">Support Liberty</a></li> 
     <li><a href="share.php">Your KTR Success</a></li> 
     <li><a href="libertyseries.php">Language of Liberty</a></li> 
     <li><a href="#" onclick='window.open("newsletter/newsletter.pdf");return false;'>Newsletter</a></li> 
     <li><a href='#' class="login">Student Login</a> 
     </ul>    
     </nav>

CSS

body { 
margin: 0; 
padding: 0; 
height: 100%; 
} 

nav { 
    z-index:99999; 
display:block; 
line-height: 44px; 
position: relative; 
left:0; 
white-space:nowrap; 
margin: 0 auto; 
width: 100%; 
background-color:#0D4D8D; 
padding-left: 15%; 
padding-right: 38.1%; 
} 

nav ul { 
display:block; 
margin: 0 auto; 
width: 100%; 
list-style: none; 
display: inline; 
white-space:nowrap; 
} 

nav ul li { 
float: left; 
position: relative; 
white-space:nowrap; 
} 

nav ul li a { 
display: block; 
margin: 0 auto; 
width: auto; 
padding: 0 10px 0 10px; 
font-size: 14px; 
font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif; 
line-height: 44px; 
text-align: center; 
text-decoration: none; 
color:white; 
white-space:nowrap; 
} 

nav ul ul { 
width: 200px; 
position:relative; 
top:99999px; 
left:0; 
opacity: 0; 
-webkit-transition: opacity .4s ease-in-out; 
-moz-transition: opacity .4s ease-in-out; 
-o-transition: opacity .4s ease-in-out; 
transition: opacity .4s ease-in-out; 
z-index:497; 
background:#333; 
padding: 2px; 
border:1px solid #444; 
border-top:none; 
box-shadow:#111 0 3px 4px; 
} 


nav ul ul li a { 
display: block; 
width: 200px; 
text-align: left; 
padding-left: 3px; 
font-size: 14px;  
}  

nav ul li:hover>ul{ 
opacity: 1; 
position:relative; 
top:98%; 
left:0; 
} 

nav ul li a:hover { 
color: #fff; 
background-color: black; 
} 

nav ul li.selected a { 
color: #fff; 
background-color: black; 
} 

/* CSS for resolutions less than 900px you can change this part */ 

@media only screen and (max-width: 900px) { 

    /* show nav */ 
    nav{ display: block; z-index: 99999;} 

    /* nav width en 100% and float none */ 
    #menu{ 
     width: 100%; 
     float: none; 
     padding:0; 
     margin auto; 
    } 

     /* overflow hidden */ 
     #menu ul{ 
      overflow: hidden; 
     } 
      /* li style float none */ 
      #menu li{ 
       float: none; 
      } 
       /* no border */ 
       #menu li:last-child{ border-bottom: 0;} 

      /* center links */ 
       #menu li a{ 
        padding: 15px 0 15px 0; 
        margin: auto; 
        height: auto; 
        line-height: normal; 
       } 

}

來源

2016-07-13 05:46:46 JJCMMMMG

導航欄無法正常工作，分辨率較低

回答

相關問題