我的导航栏没有悬停并且链接不起作用，为什么不呢？

Question

我的导航栏未链接，而且当我将鼠标悬停在它们上时，它们也将不起作用。

<header>
    <div class="row">
        <ul class="main-nav">
            <ul>
                <li class="active"><a href="">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><a href="blog.html">BLOG</a></li>
                <li><a href="#">STUDY</a></li>
                <li><a href="#">STUDY</a></li>
            </ul>
        </ul>
    </div>

我的CSS是这样：

.row {
max-width: 1200px;
margin: auto;
    }
.main-nav {
float: right;
margin-top: 30px;
    }
.main-nav li {
display: inline-block;
    }
.main-nav li, a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
     }
 .main-nav li.active a {
border: 1px solid white;
     }
 .main-nav li a:hover {
border: 1px solid white;
background-color: darkorange;
     }

您能告诉我这段代码有什么问题吗？它是说.main-nav li a：hover的部分吗？请我真的需要你我可以解决的问题

Answer 1

我从头开始检查过，看来链接工作正常。我不确定为什么在您的情况下不起作用。在下面的代码段中，我对。main-nav

和。main-nav li，a