Question

我正在制作一个网页但是在使用谷歌浏览器进行测试时，主页的导航栏不起作用，但所有其他页面的导航栏都有效，我不知道为什么会这样。 html粘贴在下面，请指出任何使代码与谷歌浏览器不兼容的错误

<body>
    <ul>
        <li style="float: left"><a href="afterhoursHome.html">AfterHours</a></li>
        <li><a href ="afterhoursContact Us.html">Contact Us</a></li>
        <li><a href ="afterhoursAbout us.html">About Us</a></li>
        <li><a href ="afterhoursGallery.html">Gallery</a></li>
        <li><a href ="afterhoursDelivery.html">Delivery</a></li>
        <li><a>Menu</a></li>
    </ul>

<video width="100%" autoplay loop>
    <source src="afterhoursnew2.mp4" type="video/mp4"> 
</video>

下面是css

body{
        margin: 0;
        padding: 0;
        background-color: skyblue;}

    ul {
        margin:0;
        position:fixed;
        list-style-type: none;
        font-size: 27px;    
        text-align: center;
        overflow: hidden;
        background-color:rgba (71,71,71,0.8)! !important;
        }

    li {
        float: right;
        text-align: center;
        font: "freestyle script"} 

    li a {
        display: inline-block;
        color: white;
        text-align:center;
        padding: 14px 25px;
        text-decoration: none;
        font-size: 40px;
        font-family: "freestyle script";
        font-weight: bold;}

    li a:hover {
        border-top: 6px solid deeppink;
        color: deeppink;}

Answer 1

        <!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

你可以尝试这个

Answer 2

尝试添加：

的z-index：2;

到css代码：

ul {
    margin:0;
    position:fixed;
    list-style-type: none;
    font-size: 27px;    
    text-align: center;
    overflow: hidden;
    background-color:rgba (71,71,71,0.8)! !important;
    z-index:2;
    }

导航栏不适用于谷歌浏览器

2 个答案: