0

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

无论如何谢谢。

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>
4

1 回答 1

0

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

这是演示小提琴

.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;
}
于 2013-10-12T12:15:29.290 回答