I need help creating a navigation bar with different background colors and hover colors for each block. I can do this separately but not together, so please advise on how to combine both in the li class.
Below is the code for the navigation bar:
header {
width: 100%;
height: 70px;
box-sizing: border-box;
background-color: #373948;
position: fixed;
top: 0px;
left: 0px;
padding: 0px 0px 0px 30px;
}
header h1 {
float: left;
margin: 5px 0px;
color: white;
font-family: 'Meddon', cursive;
}
header nav ul {
height: 70px;
float: right;
}
header nav ul li {
height: 70px;
display: inline-block;
}
header nav ul li a {
height: 30px;
display: block;
padding: 17px 20px;
color: white;
font-size: 2.2em;
text-decoration: none;
border-top: 3px solid #373948;
border-bottom: 3px solid #373948;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-o-transition: color 1s ease;
transition: color 1s ease;
}The following code is for setting different hover background colors for various links. Please note that modifications are needed.
header nav ul li #link1 a:hover{
background-color: #373948;
}
header nav ul li #link2 a:hover{
background-color: #00ff00;
}
header nav ul li #link3 a:hover{
background-color: #ff0000;
}
header nav ul li #link4 a:hover{
background-color: #0000ff;
}The code below specifies different background colors for different links.
header nav ul li a.link-1 { background-color: #00c0e4; }
header nav ul li a.link-2 { background-color: #e6567a; }
header nav ul li a.link-3 { background-color: #eac14d; }
header nav ul li a.link-4 { background-color: #5bd999; }Please provide guidance on how to implement both hover and simple background colors as demonstrated in the above two codes within the following section.
<header>
<nav role='navigation'>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>
</header>