无法点击我的导航链接答案

【问题标题】：Can't click on my navigation links无法点击我的导航链接
【发布时间】：2017-06-06 08:15:20
【问题描述】：

您好，我是初学者，我的 HTML 导航栏有问题。我已经尝试了很多，但它们仍然无法点击...

我的 HTML 有错误吗？

<header>
<nav display: inline;>
    <ul>
        <li>
            <navi><img src="images/header_logo.png" alt="Logo" href="index.html" width="40%" height="40%" /></navi>
        </li>
        <li>
            <navi>
                <z class="active" href="index.html">Startseite</z>
            </navi>
        </li>
        <li>
            <navi>
                <z href="produkte.html">Produkte</z>
            </navi>
        </li>
        <li>
            <navi>
                <z href="about.html">Über uns</z>
            </navi>
        </li>
        <li>
            <navi>
                <z href="agb.html">AGB</z>
            </navi>
        </li>
    </ul>
</nav>

或者是我的 CSS 中的错误？这可能不是最好的风格，但在我看来它看起来不错。但是我不能点击任何链接...

body {
margin: 0px;
padding: 0px;
}

img {
max-width: 100%;
}

ul {
margin: 0px;
list-style: none;
padding: 0px;
overflow: hidden;
background-color: burlywood;
}

li navi {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}

li navi z {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}

.active {
background-color: #deae6f;
}

li z:hover:not(.active) {
background-color: #deb27a;
}

感谢您的帮助

【问题讨论】：

html 的结构
菜单一

body { margin: 0; padding: 0; } img { max-width: 100%; } ul { margin: 0; list-style: none; padding: 0; overflow: hidden; background-color: burlywood; position: relative; z-index: 1; } li nav { float: left; display: block; text-align: center; padding: 14px 16px; } li nav z { float: left; display: block; text-align: center; padding: 14px 30px; margin-top: 40px; color: white; border: 2px solid white; } .active { background-color: #deae6f; } li a:hover:not(.active) { background-color: #deb27a; }

<header> <nav style="display: inline;"> <ul> <li> <nav><a href="index.html" width="40%" height="40%" ><img src="images/header_logo.png" alt="Logo"/></a></navi> </li> <li> <nav> <a class="active" href="index.html">Startseite</a> </nav> </li> <li> <nav> <a href="produkte.html">Produkte</a> </nav> </li> <li> <nav> <a href="about.html">Über uns</a> </nav> </li> <li> <nav> <a href="agb.html">AGB</a> </nav> </li> </ul> </nav> </header>

* { box-sizing: border-box; } body { margin: 0px; padding: 0px; } img { max-width: 100%; } ul { margin: 0px; list-style: none; padding: 0px; overflow: hidden; background-color: burlywood; } li nav { float: left; display: block; text-align: center; padding: 14px 16px; } li a { float: left; display: block; text-align: center; padding: 14px 30px; margin-top: 40px; color: white; border: 2px solid white; } .active { background-color: #deae6f; } li a:hover:not(.active) { background-color: #deb27a; }

<header> <nav style="display: block;"> <ul> <li> <nav><img src="images/header_logo.png" alt="Logo" href="index.html" width="40%" height="40%" /></nav> </li> <li> <nav> <a class="active" href="index.html">Startseite</a> </nav> </li> <li> <nav> <a href="produkte.html">Produkte</a> </nav> </li> <li> <nav> <a href="about.html">Über uns</a> </nav> </li> <li> <nav> <a href="agb.html">AGB</a> </nav> </li> </ul> </nav> </header>