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

无法点击链接;考虑重叠（填充？边距？）

1 个答案: