导航栏在谷歌浏览器上不起作用

我正在制作一个网页，但是当使用谷歌浏览器进行测试时，主页的导航栏不起作用，但所有其他页面的导航栏确实有效，我不知道为什么会这样。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;}

        <!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>

你可以试试这个

尝试添加：

z指数：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;
    }

相关内容

最新更新

热门标签：