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

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 类进行了一些更改，因此它看起来比您拥有的更干净整洁之前( block 状和粘性导航栏)。 请为结果运行代码片段。希望您会发现这很有帮助。

.row {
max-width: 1200px;
margin: auto;
    }
.main-nav {
float: right;
margin-top: 30px;
background-color: #0066ff;
width:100%;
padding:7px;
    }
.main-nav li {
display: inline-block;
    }
.main-nav li, a {
color: white;
width:70px;
float:left;
padding:10px;
text-align:center;
text-decoration: none;

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;
     }

<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>
    </header>