html - 无法点击链接；考虑重叠(填充？边距？)

Question

我正在做一个网站，但我在制作导航栏时遇到了问题。我已经创建了一个导航栏，但是当我想点击左侧的导航栏时，它们无法点击，而右侧的导航栏是..我的问题是:如何修复它我尝试了不同的方法，但我是一个菜鸟，希望/我认为有一个我不知道的简单解决方案。

还是谢谢你

CSS:

.navlay{
background-image: url(./img/noise.png);
position: absolute;
width: 80%;
height: 7%;
margin-top: 19.4%;
margin-right:10%; 
margin-left:10%;
}


.left {
position: absolute;
width: 80%;
margin-left: 8%;
margin-top: 20.3%;

text-decoration: none;
display: inline;
list-style: none;

font-size: 100%;
font-family: webbie;
font-weight: bold;
}

.right {
position: absolute;
width: 80%;
margin-top: 20.3%;

list-style: none;
text-decoration: none;
display: inline;

font-size: 100%;
font-family: webbie;
font-weight: bold;
}


.left li {
float: left;
padding-left: 3%;
padding-right: 3%;
}

.right li {
float: left;
padding-left: 3%;
padding-right: 3%;
}

.right li:first-child {
float: left;
padding-left: 80%;
padding-right: 3%;
}

.left li a {
color: #949494;
}

.right li a {
color: #949494;
}

.left li a:hover {
opacity: 0.6;
color: #949494;
cursor: pointer;
}

.right li a:hover {
opacity: 0.6;
color: #949494;
cursor: pointer;
}

图片:http://i.imgur.com/lL6MsgD.png

HTML:

        <ul class="left">
            <li><a href="index.php">Home</a></li>
            <li><a href="about.php">About</a></li>
            <li><a href="apply.php">Apply</a></li>
            <li><a href="members.php">Team-Members</a></li>
        </ul>
        <ul class="right">
            <li><a href="login.php">Login</a></li>
            <li><a href="signup.php">Signup</a></li>
        </ul>

Answer 1

由于您设置的右侧宽度，您无法点击左侧。您可以尝试遵循 css。

这是 Demo Fiddle

.left {
    position: absolute;
    width: 50%;
    margin-left: 8%;
    margin-top: 20.3%;
    text-decoration: none;
    display: inline;
    list-style: none;
    font-size: 100%;
    font-family: webbie;
    font-weight: bold;
    z-index: 1;
}
.right {
    position: absolute;
    width: 80%;
    margin-top: 20.3%;
    list-style: none;
    text-decoration: none;
    display: inline;
    font-size: 100%;
    font-family: webbie;
    font-weight: bold;
}

.right li:first-child {
    float: left;
    padding-left: 80%;
    padding-right: 3%;
    z-index: 2;
}