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

您好，现在您在css文件中添加两个css，就像这样

将您的.class添加到position: relative;和z-index: 9999;并添加nav代码z-index: 99999;，如下所示

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

nav{z-index: 99999;}

Answer 2

#modalForgot重叠。将top: -100%添加到.modal.fade

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

}

NAV Bar在较低分辨率下无法正常工作

3 个答案: