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，以便弄清楚它应该是什么意思。

即，您不能将锚点（'a'）直接放在无序列表（'ul'）中，列表中唯一有效的子项是列表项（'li'）。换句话说，您需要在'a'标签周围包含'li'标签。

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

如果您修复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>

HTML5导航的奇怪行为

1 个答案: