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

时间:2019-11-17 04:52:26

标签: html css hyperlink navbar nav

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

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

1 个答案:

答案 0 :(得分:1)

我从头开始检查过,看来链接工作正常。我不确定为什么在您的情况下不起作用。在下面的代码段中,我对 .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>