Problema com :hover

CSS

HTML5

24/12/2019

Estou com problemas com o :hover.
<body>
<header>
<div class="row">
<div class="logo">
<img src="Image/logo1.jpg">
</div>
<ul class="main-nav">
<li class="active"><a href=""> HOME </a></li>
<li><a href="services.html"> SERVICES </a></li>
<li><a href="about.html"> ABOUT </a></li>
<li><a href="contact.html"> CONTACT </a></li>
<li><a href="news.html"> NEWS </a></li>
<li><a href="faq.html"> FAQ </a></li>

</ul>
CSS
*{
margin: 0px;
padding: 0px;
}
header{

height: 100px;
background-size: cover;
background-position: center;
}
.main-nav{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: black;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto",sans-serif;
font-size: 15px;
}
.main-nav li.active a{
border: 1px solid black;

}
.main-nav li a:hover{
border: 1px solid black;
}

Na pagina o :hover só funciona no FAQ e News. Não estou conseguindo achar o erro.
Bianca Nogueira

Bianca Nogueira

Curtidas 0

Respostas

Stella Oliveira

Stella Oliveira

24/12/2019

Bia, se você copiou o código inteiro que tá no seu editor, ele tá errado. Eu corrigi ele, adicionando a tag style e removendo o comentário CSS e tudo funcionou.

A lógica está certa, a sintaxe, não

<body>
    <header>
        <div class="row">
            <div class="logo">
                <img src="Image/logo1.jpg">
            </div>
            <ul class="main-nav">
                <li class="active"><a href=""> HOME </a></li>
                <li><a href="services.html"> SERVICES </a></li>
                <li><a href="about.html"> ABOUT </a></li>
                <li><a href="contact.html"> CONTACT </a></li>
                <li><a href="news.html"> NEWS </a></li>
                <li><a href="faq.html"> FAQ </a></li>

            </ul>

            <style>
                * {
                    margin: 0px;
                    padding: 0px;
                }

                header {

                    height: 100px;
                    background-size: cover;
                    background-position: center;
                }

                .main-nav {
                    float: right;
                    list-style: none;
                    margin-top: 30px;
                }

                .main-nav li {
                    display: inline-block;
                }

                .main-nav li a {
                    color: black;
                    text-decoration: none;
                    padding: 5px 20px;
                    font-family: "Roboto", sans-serif;
                    font-size: 15px;
                }

                .main-nav li.active a {
                    border: 1px solid black;

                }

                .main-nav li a:hover {
                    border: 1px solid black;
                }
            </style>
GOSTEI 0
POSTAR