NAV Bar не работает должным образом с более низкими разрешениями

Question

По какой-то странной причине, при использовании ноутбука или мобильного устройства или даже более низких разрешений, чем 1080p, панель NAV не работает должным образом. Я не могу выбрать элементы на правой стороне панели. Это меня насторожило. Кто-нибудь знает, почему это было бы?

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

Answer 1

#modalForgot накладывается на него. Add top: -100% to .modal.fade

Answer 2

Привет теперь вы добавить два CSS в файле CSS, как, как это

Добавить .class в position: relative; и z-index: 9999; и добавить nav тег z-index: 99999;, как так

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

nav{z-index: 99999;} 

Answer 3

Привет, друг.

Попробуйте это:

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; 
       } 

}