Hover effect not working

Web Development Full-Stack
1

The hover effect not working on the CSS code below What am I doing wrong?

.main-nav{
background-color: rgb(41, 30, 101);
display: block;
width: 100%;
height: 90px;
position: fixed;
overflow: hidden;
left:0 ;
opacity:
}
.nav-ul{
list-style-type:none;
margin-top: 50px;
padding-right: 50px;
}

.nav-li{
float: right ;
color: aliceblue;
padding-right: 50px;
font-size: larger;
display: inline-block;
}
.nav-a{
display:inline-block;
text-align:center;
padding: 10px 30px;
width: 35px;
position:fixed;
z-index: index 1000;
}

.nav-a:hover{
color:yellow;
}

2

https://jigsaw.w3.org/css-validator/validator

We pasted your posted CSS into the TEXTAREA of this validator:

Sorry! We found the following errors (3)

URI : TextArea

9 .main-nav Parse Error
19 .nav-li Value Error : color aliceblue is not a color value : aliceblue
30 .nav-a Value Error : z-index Too many values or values are not recognized : index 1000

Valid CSS information

.main-nav {
background-color : rgb(41, 30, 101);
display : block;
width : 100%;
height : 90px;
position : fixed;
overflow : hidden;
left : 0;
}
.nav-ul {
list-style-type : none;
margin-top : 50px;
padding-right : 50px;
}
.nav-li {
float : right;
padding-right : 50px;
font-size : larger;
display : inline-block;
}
.nav-a {
display : inline-block;
text-align : center;
padding : 10px 30px;
width : 35px;
position : fixed;
}
.nav-a:hover {
color : yellow;
}

Bottom line, make diligent use of validators to draw your first conclusions concerning errors. Once the CSS is validated, then, and only then, should you be looking for other issues. Validate after every change and learn how to use this most spectacular tool. It is not a tool to help you right cooler CSS. but it will help you to write well formed CSS, for the most part. Validate, validate, validate, is all Iā€™m saying here.

2 Likes