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

【问题标题】：My nav bar aren't being hover and the link doesn't work, why not?我的导航栏没有悬停并且链接不起作用，为什么不呢？
【发布时间】：2019-11-17 04:52:26
【问题描述】：

我的导航栏没有被链接，当我将鼠标悬停在它们上面时，它们也不起作用。

<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的部分吗？请问我真的需要你我能解决的问题

【问题讨论】：

标签： html css hyperlink navbar nav

【解决方案1】：

我已经检查过了，链接似乎工作正常。我不确定为什么它在你的情况下不起作用。在下面的 sn-p 中，我对 .main-nav 和 .main-nav li, a 类做了一些更改，使其看起来比什么都好和干净你以前有过（笨拙和粘性的导航栏）。 请运行代码 sn-p 以获得结果。希望对您有所帮助。

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

【讨论】：