Question

我在我的网站顶部创建了一个导航栏但由于某些原因某些链接无效？我已经尝试了很多东西来改变这一点，但无法弄清楚出了什么问题。如果有人有任何建议，那将会被大量挪用。

HTML5代码

<nav>
    <ul>
        <li class="top-level-menu">
            <a href="index.html">home</a>
        </li>
        <li class="top-level-menu">
            <a href="venue.html">venue</a>
                <ul class="sub-menu">
                    <li><a href="venue.html#address">address</a></li>
                    <li><a href="venue.html#background">venue background</a></li>
                    <li><a href="venue.html#instructors">instructors</a></li>
                </ul>
        </li>
        <li class="top-level-menu">
            <a href="wakeboarding.html">wakeboarding</a>
                <ul class="sub-menu">
                    <li><a href="wakeboarding.html">background</a></li> 
                    <li><a href="wakeboarding.html">future</a></li>
                </ul>
        </li>
        <li class="top-level-menu">
            <a href="events.html">events</a>
                <ul class="sub-menu">
                    <li><a href="events.html">professional</a></li> 
                    <li><a href="events.html">amateur</a></li>
                </ul>
        </li>
        <li class="top-level-menu">
            <a href="prices.html">prices</a>
                <ul class="sub-menu">
                    <li><a href="prices.html">prices</a></li> 
                    <li><a href="events.html">special offers</a></li>
                </ul>
        </li>
        <li class="top-level-menu">
            <a href="contact.html">contact us</a>
        </li>
    </ul>
</nav>

CSS代码

ul {
    list-style: none;

}

li {

    display:inline;
    font-size: 26px;
    left: 200px;
    top: 75px;
    padding: 80px;
    font-family: Geneva,Tahoma,Verdana,sans-serif; 
    }

body nav .top-level-menu {
    position: relative;
    //cursor: pointer;
}

body nav .top-level-menu:hover > ul {
    display: block;
}

body nav .sub-menu {
    display: none;
    position: absolute;
    left: -40px;
    top: 110px;

}

Answer 1

问题来自于来自其他li元素的重叠填充，它涵盖了阻止它们被点击的链接。

快速解决方案是删除以下css行以确认我说的是正确的。

li{display:inline;}

要解决此问题，您可能希望将每个li元素的填充从80px减少到更小。

li{padding:0px;}

链接无法在HTML5中工作

1 个答案: