html - HTML5 导航的奇怪行为

Question

这是页面导航的html代码:

<nav>
<ul id="navigation">
<A class="scroll" href="#first">Hjem</A>
<A class="scroll" href="#second">Info</A>
<A class="scroll" href="#third">Pris</A>
<li style="display: inline;"><A class="scroll" href="#">Brugervejledninger &raquo;</A>
<ul>
    <li><a href="pdf/arbejdsleder.pdf" target="_blank">arbejdsleder</a></li>
    <li><a href="pdf/medarbejder.pdf" target="_blank">medarbejder</a></li>
</ul>
</li>

<a id="login-button" href="http://mintimeseddel.dk/scheduling/users">Log ind</a>
</ul>
</nav>

下面是用于设置样式的 css:

ul#navigation li:hover > ul
{
    visibility:visible;
    opacity:1;
}

ul#navigation ul, ul#navigation ul li ul {
    list-style: none;
    margin: 0;
    padding: 0;    
    visibility:hidden;
    position: absolute;
    z-index: 99999;
    width:180px;
    background:#f8f8f8;
    box-shadow:1px 1px 3px #ccc;
    opacity:0;
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -o-transition:opacity 0.2s linear, visibility 0.2s linear; 
    transition:opacity 0.2s linear, visibility 0.2s linear;     
}

ul#navigation ul {
    top: 43px;
    left: 43%;
}

ul#navigation ul li ul {
    top: 0;
    left: 181px;
}

ul#navigation ul li {
    clear:both;
    width:100%;
    border:0 none;
    border-bottom:1px solid #c9c9c9;
}

ul#navigation ul li a {
    background:none;
    padding:7px 15px;
    color:#616161;
    text-shadow:1px 1px 0px #fff;
    text-decoration:none;
    display:inline-block;
    border:0 none;
    float:left;
    clear:both;
    width:150px;
}

在本地主机上一切都按预期工作，但是一旦网站上传到实时服务器，问题就出现了，导航菜单变得困惑。即使它是特定于浏览器的:在 firefox 上它总是正确显示，而其他浏览器需要重新加载页面几次才能正确显示。

可以在以下网址查看它的实例:www.mintimeseddel.dk

非常感谢任何帮助。

Answer 1

您的 HTML 是 not valid .浏览器会以不同的方式解释无效的 html，以弄清楚它的含义。

即，您不能将 anchor ('a') 直接放在无序列表 ('ul') 中，列表的唯一有效子项是列表项 ('li')。换句话说，您需要在“a”标签周围包裹一个“li”标签。

某些浏览器会关闭列表并在列表的父元素(在本例中为“nav”)内显示 anchor 。其他浏览器会将 anchor 透明地包装在列表条目中。其他人仍然会尝试将 anchor 渲染到它们所在的位置。

如果您修复了 HTML，其余的应该开始一致地工作(尽管您可能必须返回并重做 CSS)。

编辑 回应 OP 的评论:HTML 应如下所示:

<nav>
    <ul id="navigation">
        <!-- note the new 'li' tags here -->
        <li><a class="scroll" href="#first">Hjem</a></li>
        <li><a class="scroll" href="#second">Info</a></li>
        <li><a class="scroll" href="#third">Pris</a></li>
        <li style="display: inline;"><A class="scroll" href="#">Brugervejledninger &raquo;</A>
            <ul>
                  <li><a href="pdf/arbejdsleder.pdf" target="_blank">arbejdsleder</a></li>
                  <li><a href="pdf/medarbejder.pdf" target="_blank">medarbejder</a></li>
            </ul>
        </li>
    </ul>
    <!-- and another additional 'li' tag here -->
    <li><a id="login-button" href="http://mintimeseddel.dk/scheduling/users">Log ind</a></li>
</nav>