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

2024-05-17 • 问答

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

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

我从头开始检查过，看来链接工作正常。我不确定为什么在您的情况下不起作用。在下面的代码段中，我对 .main-nav 和 .main-nav li 类进行了一些更改，以使其看起来比您拥有的更好，更干净之前（笨拙的导航栏）。 请为结果运行代码段。希望对您有所帮助。

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

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

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

大家都在问